MDL-62234 Theme boost: Improve atto dialogue styling
authorBas Brands <bas@moodle.com>
Wed, 13 Jun 2018 09:34:41 +0000 (11:34 +0200)
committerBas Brands <bas@moodle.com>
Wed, 13 Jun 2018 09:34:41 +0000 (11:34 +0200)
40 files changed:
lib/editor/atto/plugins/charmap/styles.css
lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js
lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js
lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js
lib/editor/atto/plugins/charmap/yui/src/button/js/button.js
lib/editor/atto/plugins/equation/styles.css
lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js
lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js
lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js
lib/editor/atto/plugins/equation/yui/src/button/js/button.js
lib/editor/atto/plugins/image/styles.css
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
lib/editor/atto/plugins/image/yui/src/button/js/button.js
lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js
lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js
lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js
lib/editor/atto/plugins/link/yui/src/button/js/button.js
lib/editor/atto/plugins/media/styles.css
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
lib/editor/atto/plugins/media/yui/src/button/js/button.js
lib/editor/atto/plugins/table/styles.css
lib/editor/atto/plugins/table/tests/behat/table.feature
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
lib/editor/atto/plugins/table/yui/src/button/js/button.js
lib/editor/atto/styles.css
theme/boost/scss/moodle/bs4alphacompat.scss
theme/boost/scss/moodle/core.scss
theme/boost/templates/core/filemanager_fileselect.mustache
theme/boost/templates/core/filemanager_loginform.mustache
theme/boost/templates/core/filemanager_selectlayout.mustache
theme/boost/templates/core/filemanager_uploadform.mustache
theme/bootstrapbase/less/moodle/bs4-compat.less
theme/bootstrapbase/less/moodle/forms.less
theme/bootstrapbase/style/moodle.css

index 0f151ec..4656462 100644 (file)
@@ -1,4 +1,4 @@
 .atto_charmap_selector button {
-    width: 2em;
-    padding: 0 3px;
+    width: 2.18rem;
+    margin: 0.1rem;
 }
index 30e0e37..422e2d8 100644 (file)
Binary files a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js and b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js differ
index 77b7449..339dad4 100644 (file)
Binary files a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js and b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js differ
index 30e0e37..422e2d8 100644 (file)
Binary files a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js and b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js differ
index 6f549b4..397f1fe 100644 (file)
@@ -377,7 +377,7 @@ Y.namespace('M.atto_charmap').Button = Y.Base.create('button', Y.M.editor_atto.E
             '<div class="{{CSS.CHARMAP}}">' +
                 '{{#each CHARMAP}}' +
                     '{{#if this.[2]}}' +
-                    '<button class="{{../../CSS.BUTTON}}" ' +
+                    '<button class="btn btn-default btn-sm {{../../CSS.BUTTON}}" ' +
                         'aria-label="{{get_string this.[3] ../../component}}" ' +
                         'title="{{get_string this.[3] ../../component}}" ' +
                         'data-character="{{this.[0]}}" ' +
index f6081a0..8df2d6b 100644 (file)
@@ -1,16 +1,3 @@
-.atto_equation_library .yui3-tabview-list {
-    border: none;
-}
-
-.atto_equation_library .yui3-tab-selected .yui3-tab-label,
-.yui3-skin-sam #atto_equation_library .yui3-tab-selected .yui3-tab-label:focus,
-.yui3-skin-sam #atto_equation_library .yui3-tab-selected .yui3-tab-label:hover {
-    background: none;
-    color: black;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-}
-
 .atto_equation_library button {
     margin: 0.25%;
     min-width: 12%;
index ae1d92c..fdc94ce 100644 (file)
Binary files a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js and b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js differ
index a5ff287..00d0781 100644 (file)
Binary files a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js and b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js differ
index f98b58c..1274071 100644 (file)
Binary files a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js and b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js differ
index 849a967..6db2cb8 100644 (file)
@@ -60,29 +60,34 @@ var COMPONENTNAME = 'atto_equation',
                 '<textarea class="fullwidth {{CSS.EQUATION_TEXT}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/>' +
                 '<label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label>' +
-                '<div describedby="{{elementid}}_cursorinfo" class="well well-small fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
+                '<div describedby="{{elementid}}_cursorinfo" class="well well-small p-1 fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div>' +
                 '<div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="{{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
+                    '<button class="btn btn-default {{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
                 '</div>' +
             '</form>',
         LIBRARY: '' +
             '<div class="{{CSS.LIBRARY}}">' +
-                '<ul>' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '{{#each library}}' +
-                        '<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
-                            '{{get_string groupname ../component}}' +
-                        '</a></li>' +
+                        '<li  class="nav-item">' +
+                            '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' role="tab" data-toggle="tab">' +
+                                '{{get_string groupname ../component}}' +
+                            '</a>' +
+                        '</li>' +
                     '{{/each}}' +
                 '</ul>' +
-                '<div class="{{CSS.LIBRARY_GROUPS}}">' +
+                '<div class="tab-content m-b-1 {{CSS.LIBRARY_GROUPS}}">' +
                     '{{#each library}}' +
-                        '<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+                        '<div data-medium-type="{{CSS.LINK}}" class="tab-pane" ' +
+                        'id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
                             '<div role="toolbar">' +
                             '{{#split "\n" elements}}' +
-                                '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">' +
+                                '<button class="btn btn-default" tabindex="-1" data-tex="{{this}}"' +
+                                    'aria-label="{{this}}" title="{{this}}">' +
                                     '{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}' +
                                 '</button>' +
                             '{{/split}}' +
@@ -220,13 +225,8 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         var content = this._getDialogueContent();
         dialogue.set('bodyContent', content);
 
-        var library = content.one(SELECTORS.LIBRARY);
+        content.one('.nav-item:first-child .nav-link').getDOMNode().click();
 
-        var tabview = new Y.TabView({
-            srcNode: library
-        });
-
-        tabview.render();
         dialogue.show();
         // Notify the filters about the modified nodes.
         require(['core/event'], function(event) {
index a913c73..8656f0e 100644 (file)
@@ -6,7 +6,7 @@
 }
 
 .atto_image_preview_box {
-    max-height: 200px;
+    max-height: 150px;
     margin-bottom: 1em;
     overflow: auto;
 }
     cursor: pointer;
 }
 
-.atto_image_size {
-    display: inline-block;
-}
-
-.atto_image_size input[type=checkbox] {
-    margin-left: 1em;
-    margin-right: 1em;
-}
-
-.atto_image_size input[type=text] {
-    width: 3em;
-}
-
-.atto_image_size label {
-    display: inline-block;
-}
-
 .atto_image_button_text-top {
     vertical-align: text-top;
     margin: 0 0.5em;
index 69ab2fd..899c1a8 100644 (file)
Binary files a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js and b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js differ
index 78edf53..bbe3e39 100644 (file)
Binary files a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js and b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js differ
index 18416c3..293794c 100644 (file)
Binary files a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js and b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js differ
index f9c0d60..5cc1626 100644 (file)
@@ -94,52 +94,79 @@ var CSS = {
 
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
-                '<br/>' +
 
                 // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input class="form-control {{CSS.INPUTURL}}" type="url" ' +
+                            'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default {{CSS.IMAGEBROWSER}}" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth {{CSS.INPUTURL}}" type="url" ' +
+                        'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
 
                 // Add the Alt box.
-                '<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">' +
+                '<div style="display:none" role="alert" class="alert alert-warning m-b-1 {{CSS.IMAGEALTWARNING}}">' +
                     '{{get_string "presentationoraltrequired" component}}' +
                 '</div>' +
+                '<div class="m-b-1">' +
                 '<label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
-                '<br/>' +
+                '<input class="form-control fullwidth {{CSS.INPUTALT}}" type="text" value="" ' +
+                'id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
 
                 // Add the presentation select box.
-                '<input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
+                '<div class="form-check">' +
+                '<input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" ' +
+                    'id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
                     '{{get_string "presentation" component}}' +
                 '</label>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
 
                 // Add the size entry boxes.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}">' +
+                '<div class="m-b-1">' +
+                '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x ' +
+                '<input type="text" class="form-control m-r-1 input-mini {{CSS.INPUTWIDTH}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
 
                 // Add the height entry box.
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
+                '<input type="text" class="form-control m-l-1 input-mini {{CSS.INPUTHEIGHT}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
 
                 // Add the constrain checkbox.
-                '<input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
-                '<label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label>' +
+                '<div class="form-check m-l-2">' +
+                '<input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">' +
+                '{{get_string "constrain" component}}</label>' +
+                '</div>' +
+                '</div>' +
                 '</div>' +
 
                 // Add the alignment selector.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
-                '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
+                '<div class="form-inline m-b-1">' +
+                '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
+                '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
                         '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
+                '</div>' +
                 // Hidden input to store custom styles.
                 '<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
                 '<br/>' +
@@ -151,7 +178,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the submit button and close the form.
-                '<button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
+                '<button class="btn btn-default {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
                 '</div>' +
             '</form>',
 
index 7aa1907..d1c971e 100644 (file)
Binary files a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js and b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js differ
index f7b3aeb..4f1d046 100644 (file)
Binary files a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js and b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js differ
index 7aa1907..d1c971e 100644 (file)
Binary files a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js and b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js differ
index 8226483..51112dd 100644 (file)
@@ -41,20 +41,32 @@ var COMPONENTNAME = 'atto_link',
     },
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/><br/>' +
-
-                // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="openlinkbrowser">{{get_string "browserepositories" component}}</button>' +
-                    '<br/>' +
+                    '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                    '<div class="input-group input-append w-100 m-b-1">' +
+                        '<input class="form-control url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry"/>' +
+                        '<span class="input-group-append">' +
+                            '<button class="btn btn-default openlinkbrowser" type="button">' +
+                            '{{get_string "browserepositories" component}}</button>' +
+                        '</span>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
-                '<input type="checkbox" class="newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label>' +
-                '<br/>' +
+                '<div class="form-check">' +
+                    '<input type="checkbox" class="form-check-input newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
+                    '<label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">' +
+                    '{{get_string "openinnewwindow" component}}' +
+                    '</label>' +
+                '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button type="submit" class="submit">{{get_string "createlink" component}}</button>' +
+                    '<button type="submit" class="btn btn-default submit">{{get_string "createlink" component}}</button>' +
                 '</div>' +
             '</form>';
 Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
index ee5a759..f1ecb10 100644 (file)
@@ -1,106 +1,4 @@
-.atto_form.atto_media #video input,
-.atto_form.atto_media #audio input,
-.atto_form.atto_media #link input {
-    box-sizing: border-box;
-    height: inherit;
-}
-
 .atto_form.atto_media > .tab-content {
     max-height: 45vh;
     overflow-x: hidden;
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-left: -20px;
-    margin-right: -21px;
-}
-
-.atto_form.atto_media [id$="-advanced-settings"] label {
-    margin-right: 10px;
-}
-
-.atto_form.atto_media label {
-    display: inline-block;
-}
-
-.atto_form.atto_media label > span {
-    display: inline-block;
-    min-width: 6em;
-}
-
-.atto_form.atto_media .atto_media_track_lang_entry,
-.atto_form.atto_media .atto_media_track_label_entry {
-    width: 168px;
-}
-
-.atto_form.atto_media .atto_media_track_source {
-    margin-bottom: 10px;
-}
-
-.atto_form.atto_media select {
-    margin-right: 10px;
-}
-
-.atto_form.atto_media [id$="-tracks"] input[type=checkbox] {
-    margin-left: 10px;
-}
-
-.atto_form.atto_media .atto_media_track ~ .atto_media_track {
-    margin-top: 5px;
-    padding-top: 10px;
-    border-top: 1px solid #e5e5e5;
-}
-
-.atto_form.atto_media label.fullwidth {
-    width: 100%;
-}
-
-.atto_media_postersize {
-    display: inline-block;
-}
-
-.atto_media_postersize input[type=text] {
-    width: 3em;
-}
-
-input[size].atto_media_url_entry {
-    width: calc(100% - 15px);
-}
-
-.openmediabrowser {
-    margin-top: -4px;
-}
-
-.addcomponent,
-.removecomponent {
-    font-weight: bold;
-    margin-right: 10px;
-}
-
-.trackhelp {
-    text-align: right;
-}
-
-.atto_form.atto_media .atto_media_source > label {
-    width: calc(100% - 153px);
-}
-
-.atto_form.atto_media .atto_media_track_lang_entry,
-.atto_form.atto_media .atto_media_track_label_entry {
-    width: 116px;
-}
-
-.langlabel {
-    width: 42%;
-}
-
-.labellabel {
-    width: 44%;
-}
-
-.defaultlabel {
-    width: 14%;
-}
-
-[data-medium-type=link] label {
-    width: 100%;
-}
+}
\ No newline at end of file
index 603896a..541685a 100644 (file)
Binary files a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js and b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js differ
index 0049c93..cfdd7c1 100644 (file)
Binary files a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js and b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js differ
index 603896a..541685a 100644 (file)
Binary files a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js and b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js differ
index f5a63c0..b406076 100644 (file)
@@ -114,7 +114,7 @@ var COMPONENTNAME = 'atto_media',
     TEMPLATES = {
         ROOT: '' +
             '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' +
-                '<ul class="root nav nav-tabs" role="tablist">' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' +
                             '{{get_string "link" component}}' +
@@ -144,17 +144,15 @@ var COMPONENTNAME = 'atto_media',
                 '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="submit" type="submit">{{get_string "createmedia" component}}</button>' +
+                    '<button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button>' +
                 '</div>' +
             '</form>',
         TAB_PANES: {
             LINK: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' +
-                '<label>' +
-                    'Enter name' +
-                    '<input class="fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
-                        'size="32" required="true"/>' +
-                '</label>',
+                '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' +
+                '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
+                        'size="32" required="true"/>',
             VIDEO: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' +
                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
@@ -200,13 +198,19 @@ var COMPONENTNAME = 'atto_media',
         FORM_COMPONENTS: {
             SOURCE: '' +
                 '<div class="{{CSS.SOURCE}} {{id}}">' +
-                    '<label>' +
+                    '<div class="m-b-1">' +
+                        '<label for="url-input">' +
                         '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' +
-                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</a>' +
-                        '<br/>' +
-                        '<input class="{{CSS.URL_INPUT}}" type="url" size="32"/>' +
-                    '</label>' +
-                    '<button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>' +
+                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' +
+                        '</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default openmediabrowser" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
                     '{{#multisource}}' +
                         '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' +
                             ' help=../addsourcehelp}}' +
@@ -229,44 +233,42 @@ var COMPONENTNAME = 'atto_media',
                 '</div>',
             DISPLAY_OPTIONS: '' +
                 '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
-                    '<label>' +
-                        '{{get_string "size" component}}' +
-                        '<div class={{CSS.POSTER_SIZE}}>' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videowidth" component}}</span>' +
-                                '<input type="text" class="{{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                    '<div class="m-b-1">' +
+                        '<label>{{get_string "size" component}}</label>' +
+                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                            '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
+                            '<input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videoheight" component}}</span>' +
-                                '<input type="text" class="{{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                            '<label class="accesshide">{{get_string "videoheight" component}}</label>' +
+                            '<input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
                         '</div>' +
-                    '</label>' +
+                    '</div>' +
                     '<div class="clearfix"></div>' +
                     '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
                 '<div>',
             ADVANCED_SETTINGS: '' +
                 '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
-                    '<label>' +
-                        '<input type="checkbox" checked="true" class="{{CSS.MEDIA_CONTROLS_TOGGLE}}"/>' +
-                        '{{get_string "controls" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_AUTOPLAY_TOGGLE}}"/>' +
-                        '{{get_string "autoplay" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_MUTE_TOGGLE}}"/>' +
-                        '{{get_string "mute" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_LOOP_TOGGLE}}"/>' +
-                        '{{get_string "loop" component}}' +
-                    '</label>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
+                        'id="media-controls-toggle"/>' +
+                        '<label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
+                        'id="media-autoplay-toggle"/>' +
+                        '<label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/>' +
+                        '<label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/>' +
+                        '<label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label>' +
+                    '</div>' +
                 '</div>',
             TRACK_TABS: '' +
-                '<ul class="nav nav-tabs">' +
+                '<ul class="nav nav-tabs mb-3">' +
                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
                             ' role="tab" data-toggle="tab">' +
@@ -328,11 +330,11 @@ var COMPONENTNAME = 'atto_media',
                     '</div>' +
                 '</div>',
             TRACK: '' +
-                '<div class="{{CSS.TRACK}}">' +
+                '<div class="m-b-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<label class="langlabel">' +
-                        '<span>{{get_string "srclang" component}}</span>' +
-                        '<select class="{{CSS.TRACK_LANG_INPUT}}">' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
+                        '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
                                 '{{#langsinstalled}}' +
                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
@@ -342,15 +344,15 @@ var COMPONENTNAME = 'atto_media',
                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
                             '</optgroup>' +
                         '</select>' +
-                    '</label>' +
-                    '<label class="labellabel">' +
-                        '<span>{{get_string "label" component}}</span>' +
-                        '<input class="{{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
-                    '</label>' +
-                    '<label class="defaultlabel">' +
-                        '<input type="checkbox" class="{{CSS.TRACK_DEFAULT_SELECT}}"/>' +
-                        '{{get_string "default" component}}' +
-                    '</label>' +
+                    '</div>' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
+                        '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
+                        '<label class="form-check-label">{{get_string "default" component}}</label>' +
+                    '</div>' +
                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
                 '</div>'
         },
index ac4e854..1c68da3 100644 (file)
@@ -3,8 +3,8 @@ div.editor_atto_content th,
 div.editor_atto_content caption {
     border: 1px dashed #bbb;
     position: relative;
-    min-width: 30px;
-    height: 13px;
+    min-width: 2rem;
+    height: 2rem;
 }
 
 div.editor_atto_content caption {
@@ -12,30 +12,18 @@ div.editor_atto_content caption {
 }
 
 div.availablecolors {
-    max-width: 55%;
-    display: inline-block;
-    vertical-align: middle;
+    background-color: #eee;
+    padding: 0.5rem;
 }
-
-div.availablecolors label:not(.hideborder) {
-    border: 1px solid #ddd;
-}
-
-div.availablecolors label {
-    border-radius: 4px;
-    display: inline-block;
-    font-size: 0.1em;
-    padding: 2px;
-    padding-left: 22px;
-}
-
-div.availablecolors label input[type="radio"] {
-    float: none;
-    margin: 0;
-    margin-left: -15px;
-}
-
-input[name="bordersize"],
-input[name="width"] {
-    margin-right: 0.3em;
+div.availablecolors .tablebordercolor,
+div.availablecolors .tablebackgroundcolor {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    vertical-align: sub;
+    border-radius: 25%;
+    margin-right: 0.2rem;
 }
index 1083781..1f3e5d4 100644 (file)
@@ -86,13 +86,13 @@ Feature: Atto tables
     And I click on "Table" "button"
     When I click on "Edit table" "link"
     # Check that the background colour is set correctly.
-    Then the field with xpath "//label/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
+    Then the field with xpath "//div[@class='tablebackgroundcolor']/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
     And the field "Table width (in %)" matches value "100"
     And the field "Borders" matches value "Around table"
     And the field "Style of borders" matches value "dashed"
     And the field "Size of borders" matches value "2"
     # Check that the border colour is set correctly.
-    And the field with xpath "//label/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
+    And the field with xpath "//div[@class='tablebordercolor']/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
 
   @javascript
   Scenario: Create a table with background colour and width with border settings off
index c8db3c5..8624a7b 100644 (file)
Binary files a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js and b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js differ
index 5b9e915..3039fcd 100644 (file)
Binary files a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js and b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js differ
index c8db3c5..8624a7b 100644 (file)
Binary files a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js and b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js differ
index f33bc87..5a36fa9 100644 (file)
@@ -41,132 +41,175 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
                 '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
             '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
                 '<option value="rows">{{get_string "rows" component}}' + '</option>' +
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
-            '<br/>' +
+            '</div>' +
+            '</div>' +
             '{{#if nonedit}}' +
-                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
+                '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" ' +
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
-                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                '>{{get_string "numberofcolumns" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" ' +
+                    'id="{{elementid}}_atto_table_columns"' +
                 'size="8" min="1" max="20"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
             '{{/if}}' +
             '{{#if allowStyling}}' +
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
-                    '<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
                         '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
                         '<option value="outer">{{get_string "outer" component}}' + '</option>' +
                         '<option value="all">{{get_string "all" component}}' + '</option>' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
-                    '<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" ' +
+                        'id="{{elementid}}_atto_table_borderstyle">' +
                         '{{#each borderStyles}}' +
                             '<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
                         '{{/each}}' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
-                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
+                    'class="form-control w-auto m-r-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
-                    '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                    '<label>{{CSS.BORDERSIZEUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
-                            'type="radio" name="borderColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                                'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                            'type="radio" name="backgroundColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
 
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
-                    '<input name="width" id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" ' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="width" id="{{elementid}}_atto_table_width" ' +
+                        'class="form-control w-auto m-r-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
-                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
-                    '<br>' +
+                    '<label>{{CSS.WIDTHUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '</fieldset>' +
             '{{/if}}' +
             '<div class="mdl-align">' +
             '<br/>' +
             '{{#if edit}}' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "updatetable" component}}</button>' +
             '{{/if}}' +
             '{{#if nonedit}}' +
-                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "createtable" component}}</button>' +
             '{{/if}}' +
             '</div>' +
         '</form>',
index 84c777e..f2b74e1 100644 (file)
@@ -107,10 +107,10 @@ div.editor_atto_toolbar div.atto_group {
     margin: 4px;
 }
 
-.atto_form label.sameline {
+/*.atto_form label.sameline {
     display: inline-block;
     min-width: 10em;
-}
+}*/
 
 .atto_form textarea.fullwidth,
 .atto_form input.fullwidth {
@@ -118,14 +118,13 @@ div.editor_atto_toolbar div.atto_group {
 }
 
 .atto_form {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding: 0.5rem;
 }
 
-.atto_form label {
+/*.atto_form label {
     display: block;
     margin: 0 0 5px 0;
-}
+}*/
 
 .atto_control {
     position: absolute;
index 3442487..4d01c21 100644 (file)
@@ -127,9 +127,9 @@ $tag-font-weight: bold !default;
     background-size: ($input-height / 2) ($input-height / 2);
 }
 
-.form-check-input {
-    position: static;
-}
+// .form-check-input {
+//     position: static;
+// }
 
 @mixin tag-variant($color) {
     background-color: $color;
index af0e685..53e5411 100644 (file)
@@ -2108,3 +2108,10 @@ $footer-link-color: $bg-inverse-link-color !default;
 .open.atto_menu > .dropdown-menu {
     display: block;
 }
+div.editor_atto_toolbar button .icon {
+    color: $gray-700;
+}
+.w-auto {
+    width: auto;
+}
+
index 48d72ed..ca9d291 100644 (file)
                 <div class="fp-license form-group row">
                     <label class="form-control-label col-4">{{#str}}chooselicense, repository{{/str}}</label>
                     <div class="col-8">
-                        <select class="form-control"></select>
+                        <select class="custom-select"></select>
                     </div>
                 </div>
                 <div class="fp-path form-group row">
                     <label class="form-control-label col-4">{{#str}}path, repository{{/str}}</label>
                     <div class="col-8">
-                        <select class="form-control"></select>
+                        <select class="custom-select"></select>
                     </div>
                 </div>
                 <div class="fp-original form-group row">
index 7002e76..c9d6cae 100644 (file)
@@ -22,7 +22,7 @@
                 </div>
                 <div class="fp-login-select form-group">
                     <label class="form-control-label"></label>
-                    <select class="form-control"></select>
+                    <select class="custom-select"></select>
                 </div>
                 <div class="fp-login-input form-group">
                     <label class="form-control-label"></label>
index 110a5e8..d27da6e 100644 (file)
@@ -41,7 +41,7 @@
             </div>
             <div class="fp-setlicense form-group row">
                 <label class="col-form-label">{{#str}}chooselicense, repository{{/str}}</label>
-                <select class="form-control"></select>
+                <select class="custom-select"></select>
             </div>
             <div class="form-group row">
                 <div class="fp-select-buttons">
index 4caf07b..b3aec8e 100644 (file)
@@ -18,7 +18,7 @@
                 </div>
                 <div class="fp-setlicense control-group">
                     <label>{{#str}}chooselicense, repository{{/str}}</label>
-                    <select class="form-control"></select>
+                    <select class="custom-select"></select>
                 </div>
             </div>
         </form>
index 8d4842e..b7a2223 100644 (file)
@@ -25,6 +25,9 @@
 
 
 // Due to lessphp limitations, the following classes must be declared statically without use of a loop.
+.p-0 {
+    padding: 0 !important;
+}
 .p-l-1 {
     padding-left: 1 * @baseFontSize !important;
 }
     padding: 1 * @baseFontSize !important;
 }
 
+.m-0 {
+    margin: 0 !important;
+}
+
 .m-l-1 {
     margin-left: 1 * @baseFontSize !important;
 }
 .bg-faded {
     background-color: @grayLighter;
 }
+
+.w-100 {
+    width: 100%;
+}
index ce2775a..cd03f9b 100644 (file)
@@ -162,7 +162,9 @@ form {
 #page-mod-forum-search .c1 {
     .form-horizontal .controls
 }
-
+.form-inline label:not(.sr-only):not(.accesshide) + select {
+    margin-left: 0.5rem;
+}
 
 .formsettingheading {
     .form-horizontal .help-block
index 4bb1976..32cad6e 100644 (file)
@@ -16726,6 +16726,9 @@ form {
 #page-mod-forum-search .c1:first-child {
   *padding-left: 200px;
 }
+.form-inline label:not(.sr-only):not(.accesshide) + select {
+  margin-left: 0.5rem;
+}
 .formsettingheading {
   margin-bottom: 0;
 }
@@ -21836,6 +21839,9 @@ ul.indented-list {
 .card-block {
   padding: 1.25rem;
 }
+.p-0 {
+  padding: 0 !important;
+}
 .p-l-1 {
   padding-left: 14px !important;
 }
@@ -21859,6 +21865,9 @@ ul.indented-list {
 .p-a-1 {
   padding: 14px !important;
 }
+.m-0 {
+  margin: 0 !important;
+}
 .m-l-1 {
   margin-left: 14px !important;
 }
@@ -22066,3 +22075,6 @@ ul.indented-list {
 .bg-faded {
   background-color: #eee;
 }
+.w-100 {
+  width: 100%;
+}