From 5561b2a1fd731c71cc9d843d77beb1bc5f4e7c4d Mon Sep 17 00:00:00 2001 From: benweet Date: Fri, 16 Aug 2013 00:17:16 +0100 Subject: [PATCH] Upgrade to Bootstrap 3 --- js/eventMgr.js | 2 +- js/extensions/documentManager.js | 2 +- js/html/bodyIndex.html | 2 +- js/html/settingsExtensionsAccordion.html | 20 +-- js/libs/bootstrap/less/button-groups.less | 18 ++- js/libs/bootstrap/less/buttons.less | 2 +- js/libs/bootstrap/less/dropdowns.less | 6 +- js/libs/bootstrap/less/forms.less | 20 ++- js/libs/bootstrap/less/input-groups.less | 2 +- js/libs/bootstrap/less/labels.less | 12 +- js/libs/bootstrap/less/mixins.less | 23 ++- js/libs/bootstrap/less/navbar.less | 177 +++++++++++----------- js/libs/bootstrap/less/navs.less | 4 +- js/libs/bootstrap/less/pagination.less | 29 ++-- js/libs/bootstrap/less/progress-bars.less | 16 +- js/libs/bootstrap/less/scaffolding.less | 12 +- js/libs/bootstrap/less/thumbnails.less | 6 +- js/libs/bootstrap/less/variables.less | 11 +- js/styles/default.less | 62 ++------ 19 files changed, 224 insertions(+), 202 deletions(-) diff --git a/js/eventMgr.js b/js/eventMgr.js index 6b5ac78d..1720c1b0 100644 --- a/js/eventMgr.js +++ b/js/eventMgr.js @@ -213,7 +213,7 @@ define([ settingsBlock: extension.settingsBlock }): ""); }, "").value(); - document.getElementById('accordion-extensions').innerHTML = accordionHtml; + document.querySelector('.accordion-extensions').innerHTML = accordionHtml; // Create a button from an extension listener function createBtn(listener) { diff --git a/js/extensions/documentManager.js b/js/extensions/documentManager.js index f1602bbd..df0b94ea 100644 --- a/js/extensions/documentManager.js +++ b/js/extensions/documentManager.js @@ -88,7 +88,7 @@ define([ fileDesc: fileDesc, }); }, '').value(); - selectedDocumentListElt.innerHTML = ''; + selectedDocumentListElt.innerHTML = ''; // Ask user confirmation $(modalElt.querySelectorAll('.document-list')).addClass('hide'); diff --git a/js/html/bodyIndex.html b/js/html/bodyIndex.html index 3210af84..99845f5d 100644 --- a/js/html/bodyIndex.html +++ b/js/html/bodyIndex.html @@ -918,7 +918,7 @@
-
+
Create your own extension... diff --git a/js/html/settingsExtensionsAccordion.html b/js/html/settingsExtensionsAccordion.html index f791f2ee..6f60e0fd 100644 --- a/js/html/settingsExtensionsAccordion.html +++ b/js/html/settingsExtensionsAccordion.html @@ -1,14 +1,16 @@ -
+
-
-
<%= extensionName %> +
+ +
+ + <%= extensionName %>
-
+
<%= settingsBlock %>
diff --git a/js/libs/bootstrap/less/button-groups.less b/js/libs/bootstrap/less/button-groups.less index 08fa740f..e4a78cd4 100644 --- a/js/libs/bootstrap/less/button-groups.less +++ b/js/libs/bootstrap/less/button-groups.less @@ -18,16 +18,18 @@ border-top-color: #fff; } } -.dropup .caret { - .btn-default & { +.dropup { + & .btn-default .caret { border-bottom-color: @btn-default-color; } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-bottom-color: #fff; + & .btn-primary, + & .btn-success, + & .btn-warning, + & .btn-danger, + & .btn-info { + .caret { + border-bottom-color: #fff; + } } } diff --git a/js/libs/bootstrap/less/buttons.less b/js/libs/bootstrap/less/buttons.less index e5c287fd..7b8692ce 100644 --- a/js/libs/bootstrap/less/buttons.less +++ b/js/libs/bootstrap/less/buttons.less @@ -41,7 +41,7 @@ &.disabled, &[disabled], fieldset[disabled] & { - cursor: default; + cursor: not-allowed; pointer-events: none; // Future-proof disabling of clicks .opacity(.65); .box-shadow(none); diff --git a/js/libs/bootstrap/less/dropdowns.less b/js/libs/bootstrap/less/dropdowns.less index 99cf7d00..d9417358 100644 --- a/js/libs/bootstrap/less/dropdowns.less +++ b/js/libs/bootstrap/less/dropdowns.less @@ -75,8 +75,7 @@ &:focus { text-decoration: none; color: @dropdown-link-hover-color; - #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); - background-color: darken(@dropdown-link-hover-bg, 5%); + background-color: @dropdown-link-hover-bg; } } @@ -88,8 +87,7 @@ color: @dropdown-link-active-color; text-decoration: none; outline: 0; - #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); - background-color: darken(@dropdown-link-active-bg, 5%); + background-color: @dropdown-link-active-bg; } } diff --git a/js/libs/bootstrap/less/forms.less b/js/libs/bootstrap/less/forms.less index a8847be2..c59cdd4d 100644 --- a/js/libs/bootstrap/less/forms.less +++ b/js/libs/bootstrap/less/forms.less @@ -133,9 +133,9 @@ input[type="number"] { .form-control-focus(); // Disabled and read-only inputs - // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be - // disabled if the fieldset is disabled. Due to implementation difficulty, - // we don't honor that edge case; we style them as disabled anyway. + // Note: HTML5 says that controls under a fieldset > legend:first-child won't + // be disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. &[disabled], &[readonly], fieldset[disabled] & { @@ -207,6 +207,20 @@ input[type="number"] { margin-left: 10px; // space out consecutive inline controls } +// Apply same disabled cursor tweak as for inputs +// +// Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"], +.radio, +.radio-inline, +.checkbox, +.checkbox-inline { + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} // Form control sizing .input-sm { diff --git a/js/libs/bootstrap/less/input-groups.less b/js/libs/bootstrap/less/input-groups.less index 153b2295..570f03f9 100644 --- a/js/libs/bootstrap/less/input-groups.less +++ b/js/libs/bootstrap/less/input-groups.less @@ -32,7 +32,7 @@ .input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { .input-sm(); } +.input-group-sm > .input-group-btn > .btn { .input-sm(); } // Display as table-cell diff --git a/js/libs/bootstrap/less/labels.less b/js/libs/bootstrap/less/labels.less index 941d27f3..6a022981 100644 --- a/js/libs/bootstrap/less/labels.less +++ b/js/libs/bootstrap/less/labels.less @@ -37,18 +37,22 @@ .label-variant(@label-default-bg); } -.label-danger { - .label-variant(@label-danger-bg); +.label-primary { + .label-variant(@label-primary-bg); } .label-success { .label-variant(@label-success-bg); } +.label-info { + .label-variant(@label-info-bg); +} + .label-warning { .label-variant(@label-warning-bg); } -.label-info { - .label-variant(@label-info-bg); +.label-danger { + .label-variant(@label-danger-bg); } diff --git a/js/libs/bootstrap/less/mixins.less b/js/libs/bootstrap/less/mixins.less index 0f30c298..65d8a0f7 100644 --- a/js/libs/bootstrap/less/mixins.less +++ b/js/libs/bootstrap/less/mixins.less @@ -294,10 +294,10 @@ -// RETINA IMAGE SUPPORT -// -------------------------------------------------- - +// Retina images +// // Short retina mixin for setting background-image and -size + .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @@ -314,6 +314,17 @@ } +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +.img-responsive(@display: block;) { + display: @display; + max-width: 100%; // Part 1: Set a maximum relative to the parent + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +} + + // COMPONENT MIXINS // -------------------------------------------------- @@ -376,7 +387,7 @@ border-color: @border; } } - + // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. .table-hover > tbody > tr { @@ -710,12 +721,12 @@ font-size: @font-size; line-height: @line-height; border-radius: @border-radius; - + select& { height: @input-height; line-height: @input-height; } - + textarea& { height: auto; } diff --git a/js/libs/bootstrap/less/navbar.less b/js/libs/bootstrap/less/navbar.less index 33e90a25..dc11007e 100644 --- a/js/libs/bootstrap/less/navbar.less +++ b/js/libs/bootstrap/less/navbar.less @@ -51,7 +51,8 @@ // content for the user's viewport. .navbar-collapse { - padding: 5px @navbar-padding-horizontal; + padding-right: @navbar-padding-horizontal; + padding-left: @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); // Clear floated elements and prevent collapsing of padding @@ -66,9 +67,21 @@ @media (min-width: @grid-float-breakpoint) { width: auto; - padding: 0; + padding-right: 0; + padding-left: 0; border-top: 0; box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } + + &.in { + overflow-y: visible; + } } } @@ -114,7 +127,6 @@ .navbar-brand { float: left; - margin-right: (@navbar-padding-horizontal / 2); padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; @@ -159,6 +171,13 @@ .icon-bar + .icon-bar { margin-top: 4px; } + + @media (min-width: @grid-float-breakpoint) { + position: relative; + top: auto; + left: auto; + display: none; + } } @@ -168,14 +187,11 @@ // the nav the full height of the horizontal nav (above 768px). .navbar-nav { + padding-top: (@navbar-padding-vertical / 2); + padding-bottom: (@navbar-padding-vertical / 2); margin-left: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal; - @media (min-width: @grid-float-breakpoint) { - margin-left: 0; - margin-right: 0; - } - > li > a { padding-top: 10px; padding-bottom: 10px; @@ -205,7 +221,7 @@ } @media (max-width: @screen-phone-max) { - // Dropdowns get custom display + // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; float: none; @@ -247,6 +263,22 @@ } } + // Uncollapse the nav + @media (min-width: @grid-float-breakpoint) { + float: left; + margin: 0; + padding-top: 0; + padding-bottom: 0; + + > li { + float: left; + > a { + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); + } + } + } + } @@ -278,6 +310,8 @@ padding: 10px @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); border-bottom: 1px solid darken(@navbar-bg, 7%); + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); // Mixin behavior for optimum display .form-inline(); @@ -299,6 +333,7 @@ margin-right: 0; padding-top: 0; padding-bottom: 0; + .box-shadow(none); } } @@ -351,6 +386,43 @@ } +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + .navbar-vertical-align(@input-height-base); +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + float: left; + color: @navbar-color; + .navbar-vertical-align(@line-height-computed); + + @media (min-width: @grid-float-breakpoint) { + margin-left: @navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; + } +} + + +// Links in navbars +// +// Add a class to ensure links outside the navbar nav are colored correctly. + +// Default navbar variables +.navbar-link { + color: @navbar-link-color; + &:hover { + color: @navbar-link-hover-color; + } +} + // Inverse navbar // -------------------------------------------------- @@ -412,8 +484,9 @@ } } - .navbar-collapse { - border-top-color: darken(@navbar-inverse-bg, 7%); + .navbar-collapse, + .navbar-form { + border-color: darken(@navbar-inverse-bg, 7%); } // Dropdowns @@ -479,85 +552,11 @@ } } -} - - - -// Responsive navbar -// -------------------------------------------------- - -@media screen and (min-width: @grid-float-breakpoint) { - - .navbar-nav { - float: left; - // undo margin to make nav extend full height of navbar - margin-top: 0; - margin-bottom: 0; - - > li { - float: left; - > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); - } + .navbar-link { + color: @navbar-inverse-link-color; + &:hover { + color: @navbar-inverse-link-hover-color; } } - // Required to make the collapsing navbar work on regular desktops - .navbar-toggle { - position: relative; - top: auto; - left: auto; - display: none; - } - .navbar-collapse.collapse { - display: block !important; - height: auto !important; - padding-bottom: 0; // Override default setting - overflow: visible !important; - } - -} - - - -// Buttons in navbars -// -// Vertically center a button within a navbar (when *not* in a form). - -.navbar-btn { - margin-top: ((@navbar-height - @input-height-base) / 2); -} - - - -// Text in navbars -// -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - float: left; - .navbar-vertical-align(@line-height-computed); -} - - - -// Links in navbars -// -// Add a class to ensure links outside the navbar nav are colored correctly. - -// Default navbar variables -.navbar-link { - color: @navbar-link-color; - &:hover { - color: @navbar-link-hover-color; - } -} - -// Use the inverse navbar variables -.navbar-inverse .navbar-link { - color: @navbar-inverse-link-color; - &:hover { - color: @navbar-inverse-link-hover-color; - } } diff --git a/js/libs/bootstrap/less/navs.less b/js/libs/bootstrap/less/navs.less index 610b97e0..e4b3243d 100644 --- a/js/libs/bootstrap/less/navs.less +++ b/js/libs/bootstrap/less/navs.less @@ -19,7 +19,7 @@ > a { position: relative; display: block; - padding: 10px 15px; + padding: @nav-link-padding; &:hover, &:focus { text-decoration: none; @@ -87,7 +87,7 @@ border: 1px solid transparent; border-radius: @border-radius-base @border-radius-base 0 0; &:hover { - border-color: @nav-tabs-link-hover-border-color; + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; } } diff --git a/js/libs/bootstrap/less/pagination.less b/js/libs/bootstrap/less/pagination.less index 12bb71b1..b480b388 100644 --- a/js/libs/bootstrap/less/pagination.less +++ b/js/libs/bootstrap/less/pagination.less @@ -11,18 +11,19 @@ display: inline; // Remove list-style and block-level defaults > a, > span { + position: relative; float: left; // Collapse white-space padding: @padding-base-vertical @padding-base-horizontal; line-height: @line-height-base; text-decoration: none; background-color: @pagination-bg; border: 1px solid @pagination-border; - border-left-width: 0; + margin-left: -1px; } &:first-child { > a, > span { - border-left-width: 1px; + margin-left: 0; .border-left-radius(@border-radius-base); } } @@ -34,16 +35,25 @@ } } - > li > a:hover, - > li > a:focus, - > .active > a, - > .active > span { - background-color: @pagination-active-bg; + > li > a, + > li > span { + &:hover, + &:focus { + background-color: @pagination-hover-bg; + } } + > .active > a, > .active > span { - color: @pagination-active-color; - cursor: default; + &, + &:hover, + &:focus { + z-index: 2; + color: @pagination-active-color; + background-color: @pagination-active-bg; + border-color: @pagination-active-bg; + cursor: default; + } } > .disabled { @@ -53,6 +63,7 @@ > a:focus { color: @pagination-disabled-color; background-color: @pagination-bg; + border-color: @pagination-border; cursor: not-allowed; } } diff --git a/js/libs/bootstrap/less/progress-bars.less b/js/libs/bootstrap/less/progress-bars.less index d4c498c5..49e5df8e 100644 --- a/js/libs/bootstrap/less/progress-bars.less +++ b/js/libs/bootstrap/less/progress-bars.less @@ -78,22 +78,18 @@ // Variations // ------------------------- -// Danger (red) -.progress-bar-danger { - .progress-bar-variant(@progress-bar-danger-bg); -} - -// Success (green) .progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); } -// Warning (orange) +.progress-bar-info { + .progress-bar-variant(@progress-bar-info-bg); +} + .progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); } -// Info (teal) -.progress-bar-info { - .progress-bar-variant(@progress-bar-info-bg); +.progress-bar-danger { + .progress-bar-variant(@progress-bar-danger-bg); } diff --git a/js/libs/bootstrap/less/scaffolding.less b/js/libs/bootstrap/less/scaffolding.less index 0c1774e2..3a6ed3d9 100644 --- a/js/libs/bootstrap/less/scaffolding.less +++ b/js/libs/bootstrap/less/scaffolding.less @@ -39,6 +39,14 @@ textarea { line-height: inherit; } +// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214 +button, +input, +select[multiple], +textarea { + background-image: none; +} + // Links // ------------------------- @@ -66,9 +74,7 @@ img { // Responsive images (ensure images don't scale beyond their parents) .img-responsive { - display: inline-block; - max-width: 100%; // Part 1: Set a maximum relative to the parent - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching + .img-responsive(); } // Rounded corners diff --git a/js/libs/bootstrap/less/thumbnails.less b/js/libs/bootstrap/less/thumbnails.less index d209412d..76f79b9e 100644 --- a/js/libs/bootstrap/less/thumbnails.less +++ b/js/libs/bootstrap/less/thumbnails.less @@ -20,10 +20,12 @@ .thumbnail { display: block; } -.thumbnail > img, -.img-thumbnail { +.thumbnail > img { .img-responsive(); } +.img-thumbnail { + .img-responsive(inline-block); +} // Add a hover state for linked versions only a.thumbnail:hover, diff --git a/js/libs/bootstrap/less/variables.less b/js/libs/bootstrap/less/variables.less index b85aaecf..aa0f9fb0 100644 --- a/js/libs/bootstrap/less/variables.less +++ b/js/libs/bootstrap/less/variables.less @@ -296,6 +296,7 @@ // Navs // ------------------------- +@nav-link-padding: 10px 15px; @nav-link-hover-bg: @gray-lighter; @nav-disabled-link-color: @gray-light; @@ -326,10 +327,15 @@ @pagination-bg: #fff; @pagination-border: #ddd; -@pagination-active-bg: #f5f5f5; -@pagination-active-color: @gray-light; + +@pagination-hover-bg: @gray-lighter; + +@pagination-active-bg: @brand-primary; +@pagination-active-color: #fff; + @pagination-disabled-color: @gray-light; + // Pager // ------------------------- @@ -396,6 +402,7 @@ // ------------------------- @label-default-bg: @gray-light; +@label-primary-bg: @brand-primary; @label-success-bg: @brand-success; @label-info-bg: @brand-info; @label-warning-bg: @brand-warning; diff --git a/js/styles/default.less b/js/styles/default.less index 99ed5c5b..474dfa47 100644 --- a/js/styles/default.less +++ b/js/styles/default.less @@ -20,6 +20,7 @@ @navbar-border: @transparent; @nav-disabled-link-color: #ccc; @nav-disabled-link-hover-color: #bbb; +@nav-tabs-border-color: @transparent; @dropdown-link-hover-bg: #888; @dropdown-link-active-color: #fff; @list-group-link-color: #333; @@ -42,6 +43,7 @@ @modal-content-border-color: #e8e8e8; @modal-footer-border-color: #e8e8e8; @modal-content-separator-color: #eee; +@tooltip-max-width: 220px; body { @@ -369,9 +371,10 @@ body { position: absolute; line-height: 10px; margin-left: -30px; - margin-top: 5px; - padding: 8px; - font-weight: normal; + margin-top: 2px; + padding: 0 8px 4px; + font-weight: normal; + height: 34px; } } .list-group-item { @@ -433,6 +436,9 @@ body { } } } + .file-list .list-group-item { + padding: 0 3px; + } .folder { font-weight: bold; color: @folder-color; @@ -569,20 +575,19 @@ body { min-height: 100px; } - .accordion-group { + .panel { border: 0; - border-bottom: 1px solid @bg-light; border-radius: inherit; - margin-bottom: 10px; - clear: both; + background: @modal-content-bg; } .accordion-heading { - padding: 8px 15px; + padding: 12px 15px; .accordion-toggle { display: inline; padding: 0; - font-weight: 500; + font-weight: bold; + cursor: pointer; &:hover { text-decoration: underline; } @@ -595,7 +600,7 @@ body { .accordion-inner { border: 0; - padding: 10px 40px; + padding: 10px 40px 20px; .form-horizontal { .control-label { text-align: left; @@ -607,7 +612,7 @@ body { } .tab-pane-button-container { - width: 200px; + width: 220px; margin: 10px auto 20px; } @@ -617,7 +622,6 @@ body { } .nav-tabs { - border-bottom: 1px solid transparent; margin: 15px 0 0; & > li > a { @@ -787,40 +791,6 @@ hr { display: none; } -.wmd-prompt-dialog { - border: 1px solid #999999; - background-color: @body-bg; -} - -.wmd-prompt-dialog>div { - font-size: 0.8em; - font-family: arial, helvetica, sans-serif; -} - -.wmd-prompt-dialog>form>input[type="text"] { - border: 1px solid #999999; - color: black; -} - -.wmd-prompt-dialog>form>input[type="button"] { - border: 1px solid #888888; - font-family: trebuchet MS, helvetica, sans-serif; - font-size: 0.8em; - font-weight: bold; -} - -.dropdown-menu .divider.with-text { - height: auto; - margin-bottom: 2px; - background-color: transparent; - border-top: 1px solid #e5e5e5; - color: #ccc; - font-variant: small-caps; - font-weight: bold; - padding-left: 20px; - cursor: default; -} - div.dropdown-menu { padding: 5px 20px; }