Prevent editor toolbar being too small, at least for left-aligned ele…

…ments If there are only floating elements, the Dojo toolbar shrinks to 0 height. To prevent this for left-aligned elements, do not set them as float:left. (Also reorder generation to keep current tool ordering) And for elements floating to the right, clear any floating for the toolbar element with "clear:both" on the pseudo :after element.
webodf · Jan 5, 2015 · c29f77c · LukasReschke · Jan 7, 2015 · LukasReschke
1 parent 60a1269
commit c29f77c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/ChangeLog.md b/ChangeLog.md
@@ -11,6 +11,7 @@ See also section about WebODF
 
 * Fix wrongly enabled hyperlink tools with no document loaded ([#833](https://github.com/kogmbh/WebODF/pull/833))
 * Prevent Cross-Site Scripting from style names and font names ([#849](https://github.com/kogmbh/WebODF/pull/849)))
+* Avoid badly rendered toolbar element with subsets of tools ([#849](https://github.com/kogmbh/WebODF/pull/855)))
 
 # Changes between 0.5.3 and 0.5.4
 

diff --git a/programs/editor/Tools.js b/programs/editor/Tools.js
@@ -144,10 +144,7 @@ define("webodf/editor/Tools", [
                     aboutButton = new Button({
                         label: tr('About WebODF Text Editor'),
                         showLabel: false,
-                        iconClass: 'webodfeditor-dijitWebODFIcon',
-                        style: {
-                            float: 'left'
-                        }
+                        iconClass: 'webodfeditor-dijitWebODFIcon'
                     });
                     aboutDialog = new AboutDialog(function (dialog) {
                         aboutButton.onClick = function () {
@@ -159,33 +156,12 @@ define("webodf/editor/Tools", [
                     aboutButton.placeAt(toolbar);
                 }
 
-                // Undo/Redo
-                undoRedoMenu = createTool(UndoRedoMenu, args.undoRedoEnabled);
-
-                // Add annotation
-                annotationControl = createTool(AnnotationControl, args.annotationsEnabled);
-
-                // Simple Style Selector [B, I, U, S]
-                simpleStyles = createTool(SimpleStyles, args.directTextStylingEnabled);
-
-                // Paragraph direct alignment buttons
-                paragraphAlignment = createTool(ParagraphAlignment, args.directParagraphStylingEnabled);
-
-                // Paragraph Style Selector
-                currentStyle = createTool(CurrentStyle, args.paragraphStyleSelectingEnabled);
-
-                // Zoom Level Selector
-                zoomSlider = createTool(ZoomSlider, args.zoomingEnabled);
-
                 // Load
                 if (loadOdtFile) {
                     loadButton = new Button({
                         label: tr('Open'),
                         showLabel: false,
                         iconClass: 'dijitIcon dijitIconFolderOpen',
-                        style: {
-                            float: 'left'
-                        },
                         onClick: function () {
                             loadOdtFile();
                         }
@@ -199,9 +175,6 @@ define("webodf/editor/Tools", [
                         label: tr('Save'),
                         showLabel: false,
                         iconClass: 'dijitEditorIcon dijitEditorIconSave',
-                        style: {
-                            float: 'left'
-                        },
                         onClick: function () {
                             saveOdtFile();
                             onToolDone();
@@ -234,13 +207,28 @@ define("webodf/editor/Tools", [
                         disabled: true,
                         label: tr('Format'),
                         iconClass: "dijitIconEditTask",
-                        style: {
-                            float: 'left'
-                        }
                     });
                     formatMenuButton.placeAt(toolbar);
                 }
 
+                // Undo/Redo
+                undoRedoMenu = createTool(UndoRedoMenu, args.undoRedoEnabled);
+
+                // Add annotation
+                annotationControl = createTool(AnnotationControl, args.annotationsEnabled);
+
+                // Simple Style Selector [B, I, U, S]
+                simpleStyles = createTool(SimpleStyles, args.directTextStylingEnabled);
+
+                // Paragraph direct alignment buttons
+                paragraphAlignment = createTool(ParagraphAlignment, args.directParagraphStylingEnabled);
+
+                // Paragraph Style Selector
+                currentStyle = createTool(CurrentStyle, args.paragraphStyleSelectingEnabled);
+
+                // Zoom Level Selector
+                zoomSlider = createTool(ZoomSlider, args.zoomingEnabled);
+
                 // hyper links
                 editHyperlinks = createTool(EditHyperlinks, args.hyperlinkEditingEnabled);
 

diff --git a/programs/editor/wodotexteditor.css b/programs/editor/wodotexteditor.css
@@ -75,6 +75,15 @@
    text-align: center;
 }
 
+/* Fix toolbar not adapting size to floating toolbar elements */
+.dijitToolbar:after {
+   content: ".";
+   visibility: hidden;
+   display: block;
+   height: 0;
+   clear: both;
+}
+
 .dijitDialog {
     border: none !important;
     box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;