fix(editor): make jQuery editor toolbar look like regular toolbar

telerik · Feb 10, 2020 · bfd016c · bfd016c
1 parent be5e715
commit bfd016c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 147 deletions.
diff --git a/packages/bootstrap/scss/editor/_theme.scss b/packages/bootstrap/scss/editor/_theme.scss
@@ -1,85 +1 @@
-@include exports("editor/theme") {
-
-
-    .k-editor {
-        @include appearance( panel );
-
-        .k-editor-toolbar {
-            @include appearance( toolbar );
-        }
-        .k-editable-area {
-            border-color: $header-border;
-        }
-    }
-
-    // Inline Editor
-    .k-editor-inline {
-
-        // Hover & Actve state
-        &:hover,
-        &.k-state-active {
-            border-color: $panel-border;
-        }
-    }
-
-
-    // Editor toolbar
-    .k-editor-toolbar {
-
-        a.k-tool {
-            @include appearance( button );
-
-            &:hover,
-            &.k-state-hover {
-                @include appearance( hovered-button );
-            }
-
-            &:active,
-            &.k-state-active {
-                @include appearance( pressed-button );
-            }
-
-            &.k-state-selected {
-                @include appearance( pressed-button );
-            }
-        }
-    }
-
-    // sass-lint:disable class-name-format
-    .editorToolbarWindow.k-header.k-window-content {
-        @include appearance( header );
-    }
-    // sass-lint:enable class-name-format
-    // sass-lint:disable class-name-format
-    .k-editor .k-editor-toolbar-wrap,
-    .k-ct-popup .k-editor-toolbar,
-    .editorToolbarWindow.k-header.k-window-content {
-        .k-tool-group {
-            border-color: $border-color;
-        }
-    }
-    // sass-lint:enable class-name-format
-
-
-    // Overflow anchor
-    .k-editor-toolbar .k-overflow-anchor {
-        padding: $toolbar-padding-y;
-        width: $toolbar-inner-calc-size;
-        height: $toolbar-inner-calc-size;
-    }
-
-    // TODO: is this the correct place?
-    .k-editor-dialog {
-        .k-edit-label {
-            padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
-        }
-    }
-
-
-    // Insert table
-    .k-ct-popup {
-        .k-state-selected {
-            @include fill( $selected-text, $selected-bg, $selected-border, none );
-        }
-    }
-}
+@import "~@progress/kendo-theme-default/scss/editor/_theme.scss";
diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss
@@ -20,6 +20,15 @@
             display: block;
         }
     }
+    table.k-editor {
+        width: 100%;
+
+        tbody,
+        tr,
+        td {
+            border-color: inherit;
+        }
+    }
 
     kendo-editor {
         &.k-editor {
@@ -49,6 +58,7 @@
         }
     }
 
+
     // Reset styles if in sandbox mode
     .k-editor-sandbox {
 
@@ -71,10 +81,8 @@
         }
     }
 
-    table.k-editor {
-        width: 100%;
-    }
 
+    // Inline editor
     .k-editor-inline {
         @include border-radius();
         padding: $padding-y-sm $padding-x-sm;
@@ -107,13 +115,12 @@
     }
 
 
-    // Custom toolbar
-    .k-editor-toolbar-wrap {
-        border-color: inherit;
-    }
+    // jQuery toolbar
     .k-editor-toolbar {
         margin: 0;
         padding: $toolbar-padding-y $toolbar-padding-y;
+        border-width: 0 0 $toolbar-border-width 0;
+        border-style: solid;
         border-color: inherit;
         list-style-type: none;
         line-height: $toolbar-line-height;
@@ -140,9 +147,7 @@
 
         // Group
         .k-tool-group {
-            padding: 0;
             border-width: 0;
-            border-style: solid;
             border-color: inherit;
 
             .k-widget {}
@@ -174,15 +179,16 @@
             align-content: center;
             justify-content: center;
             position: relative;
+
+            &:hover {
+                z-index: 2;
+            }
         }
         .k-tool-text {
             display: none;
         }
         .k-tool + .k-tool {
-            margin-left: $toolbar-spacing;
-        }
-        .k-tool-group.k-button-group .k-tool {
-            margin: 0;
+            margin-left: -$toolbar-button-border-width;
         }
 
         // Overflow tools
@@ -192,6 +198,12 @@
             right: 0;
             visibility: hidden;
         }
+        .k-overflow-anchor {
+            border-width: 0;
+            padding: $toolbar-padding-y;
+            width: $toolbar-inner-calc-size;
+            height: $toolbar-inner-calc-size;
+        }
 
     }
 
@@ -201,9 +213,7 @@
         padding: $input-padding-y;
         width: 100%;
         height: 100%;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: inherit;
+        border-width: 0;
         outline: 0;
 
         .k-resizable & {

diff --git a/packages/default/scss/editor/_theme.scss b/packages/default/scss/editor/_theme.scss
@@ -4,11 +4,6 @@
     .k-editor {
         @include appearance( panel );
         @include use-background-clip();
-
-        .k-editor-toolbar {}
-        .k-editable-area {
-            border-color: $header-border;
-        }
     }
 
     // Inline Editor
@@ -22,41 +17,12 @@
     }
 
 
-    // Editor toolbar
+    // jQuery toolbar
     .k-editor-toolbar {
         @include appearance( toolbar );
-        padding: 0;
-
 
-        // Group
-        .k-tool-group {
-            padding: $toolbar-padding-y $toolbar-padding-x;
-
-            .k-tool.k-group-start,
-            .k-tool.k-group-end {
-                @include border-radius( 0 );
-            }
-        }
-        .k-tool-group + .k-tool-group {
-            margin: 0;
-            border-left-width: 1px;
-        }
-    }
-
-    // sass-lint:disable class-name-format
-    .editorToolbarWindow.k-header.k-window-content {
-        @include appearance( header );
-    }
-    // sass-lint:enable class-name-format
-    // sass-lint:disable class-name-format
-    .k-editor .k-editor-toolbar-wrap,
-    .k-ct-popup .k-editor-toolbar,
-    .editorToolbarWindow.k-header.k-window-content {
         a.k-tool {
             @include appearance( button );
-            border-width: 0;
-            background-image: none;
-            background-color: transparent;
 
             &:hover,
             &.k-state-hover {
@@ -69,22 +35,16 @@
             }
 
             &.k-state-selected {
-                @include fill( $selected-text, $selected-bg, $selected-border, none );
+                @include appearance( pressed-primary-button );
             }
         }
-        .k-tool-group {
-            border-color: $border-color;
-        }
     }
-    // sass-lint:enable class-name-format
 
-
-    // Overflow anchor
-    .k-editor-toolbar .k-overflow-anchor {
-        padding: $toolbar-padding-y;
-        width: $toolbar-inner-calc-size;
-        height: $toolbar-inner-calc-size;
+    // sass-lint:disable class-name-format
+    .editorToolbarWindow.k-header.k-window-content {
+        @include appearance( toolbar );
     }
+    // sass-lint:enable class-name-format
 
 
     // Insert table

diff --git a/packages/material/scss/editor/_layout.scss b/packages/material/scss/editor/_layout.scss
@@ -2,6 +2,7 @@
 
 @include exports("editor/layout/material") {
 
+    // jQuery toolbar
     .k-editor-toolbar {
 
         // Dropdowns and Inputs

diff --git a/tests/visual/editor.html b/tests/visual/editor.html
@@ -15,6 +15,9 @@
         .k-editor-toolbar .k-overflow-tools {
             visibility: visible;
         }
+        tr:only-child .k-editor-toolbar {
+            border-width: 0;
+        }
 
         .k-editor .k-dialog-wrapper {
             position: static;