chore: update css identifiers

sibiraj-s · May 31, 2020 · c9555b4 · c9555b4
1 parent 50dc94a
commit c9555b4
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 176 deletions.
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -34,16 +34,6 @@
   }
 }
 
-.CustomMenuItem {
-  padding: 0 0.3rem;
-  border-radius: 2px;
-
-  &.NgxEditor-MenuItem__Active {
-    background-color: #e8f0fe;
-    color: #1a73e8;
-  }
-}
-
 .CodeMirror {
   border: 1px solid #eee;
   height: auto;

diff --git a/demo/src/app/app.component.spec.ts b/demo/src/app/app.component.spec.ts
@@ -34,6 +34,6 @@ describe('AppComponent', () => {
 
   it('should render title in a h6 tag', () => {
     const compiled: DebugElement = fixture.debugElement;
-    expect(compiled.query(By.css('.NgxEditor-MenuBar'))).toBeDefined();
+    expect(compiled.query(By.css('.NgxEditor__MenuBar'))).toBeDefined();
   });
 });
diff --git a/demo/src/app/plugins/menu/codemirror.ts b/demo/src/app/plugins/menu/codemirror.ts
@@ -7,12 +7,12 @@ const codeMirror: ToolbarCustomMenuItem = (editorView) => {
   const dom: HTMLElement = document.createElement('div');
   dom.innerHTML = 'CodeMirror';
 
-  dom.classList.add('NgxEditor-MenuItem');
-  dom.classList.add('CustomMenuItem');
+  dom.classList.add('NgxEditor__MenuItem');
+  dom.classList.add('NgxEditor__MenuItem--Text');
 
   const type = schema.nodes.code_block;
 
-  let command;
+  const command = toggleBlockType(type, schema.nodes.paragraph);
 
   dom.addEventListener('mousedown', (e: MouseEvent) => {
     e.preventDefault();
@@ -22,21 +22,16 @@ const codeMirror: ToolbarCustomMenuItem = (editorView) => {
       return;
     }
 
-    command = toggleBlockType(type, schema.nodes.paragraph);
     command(editorView.state, editorView.dispatch);
   });
 
-
   const update = (state: EditorState): void => {
     const isActive = isNodeActive(state, type);
-    let canExecute = true;
 
-    if (command) {
-      canExecute = command(state, null);
-    }
+    const canExecute = command(state, null);
 
-    dom.classList.toggle(`NgxEditor-MenuItem__Active`, isActive);
-    dom.classList.toggle(`disabled`, !canExecute);
+    dom.classList.toggle(`NgxEditor__MenuItem--Active`, isActive);
+    dom.classList.toggle(`NgxEditor--Disabled`, !canExecute);
   };
 
   return {

diff --git a/src/lib/ngx-editor.component.html b/src/lib/ngx-editor.component.html
@@ -1 +1 @@
-<div class="NgxEditor-Wrapper" #ngxEditor></div>
+<div class="NgxEditor" #ngxEditor></div>
diff --git a/src/lib/ngx-editor.component.scss b/src/lib/ngx-editor.component.scss
@@ -1,138 +1,162 @@
-.ProseMirror {
-  outline: none;
-}
-
 $icon-size: 30px;
 
-.NgxEditor-Wrapper {
+$menubar-border-color: #ddd;
+
+$menu-item-border-radius: 2px;
+$menu-item-hover-bg-color: #f1f1f1;
+$menu-item-active-bg-color: #e8f0fe;
+$menu-item-active-color: #1a73e8;
+
+$dropdown-menu-hover-bg-color: #f1f1f1;
+$dropdown-item-active-bg-color: #f1f1f1;
+
+.NgxEditor {
   background: white;
   color: black;
   background-clip: padding-box;
   border-radius: 4px;
   border: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-.NgxEditor-MenuBar {
+.NgxEditor__Content {
+  padding: 0.5rem;
+  white-space: pre-wrap;
+
+  p {
+    margin: 0;
+    margin-bottom: 0.7rem;
+  }
+}
+
+.NgxEditor__MenuBar {
   display: flex;
   padding: 0.2rem;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid $menubar-border-color;
+  cursor: default;
+}
 
-  .NgxEditor-MenuItem {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.NgxEditor__MenuItem {
+  $self: &;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    &:hover {
-      cursor: pointer;
-      background-color: #f1f1f1;
-    }
+  &:hover {
+    background-color: $menu-item-hover-bg-color;
+  }
 
-    &.NgxEditor-MenuItem__Icon {
-      height: $icon-size;
-      width: $icon-size;
-      transition: 0.3s ease-in-out;
-      border-radius: 2px;
-      margin-right: 2px;
+  &#{ $self }--Icon {
+    height: $icon-size;
+    width: $icon-size;
+    transition: 0.3s ease-in-out;
+    margin-right: 2px;
+  }
+
+  &#{ $self }--Text {
+    padding: 0 0.3rem;
+  }
 
-      &.NgxEditor-MenuItem__Active {
-        background-color: #e8f0fe;
+  &#{ $self }--Active {
+    background-color: $menu-item-active-bg-color;
+    color: $menu-item-active-color;
 
-        svg {
-          fill: #1a73e8;
-        }
-      }
+    svg {
+      fill: $menu-item-active-color;
     }
+  }
+}
+
+.NgxEditor--Disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 
-    &.NgxEditor-MenuItem__Dropdown-Wrapper {
-      position: relative;
-      max-width: 100px;
-      width: 100%;
-      justify-content: start;
-
-      .NgxEditor-MenuItem__Dropdown {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        .NgxEditor-MenuItem__Dropdown-Text {
-          margin-left: 5px;
-        }
-
-        .NgxEditor-MenuItem__Dropdown-Icon {
-          margin-left: auto;
-          position: relative;
-          top: 2px;
-        }
-      }
-
-      .NgxEditor-MenuItem__Dropdown-Menu {
-        position: absolute;
-        left: 0;
-        top: 30px;
-        box-shadow: rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-        border-radius: 4px;
-        background-color: white;
-        display: none;
-        z-index: 10;
-
-        .NgxEditor-MenuItem__Dropdown-Item {
-          cursor: pointer;
-          padding: 0.5rem 1rem;
-          white-space: nowrap;
-
-          &:hover,
-          &.NgxEditor-MenuItem__Active {
-            background-color: #f1f1f1;
-          }
-        }
-      }
-
-      &.NgxEditor-MenuItem__Dropdown-Wrapper-Selected,
-      &.NgxEditor-MenuItem__Dropdown-Wrapper-Open {
-        background-color: #e8f0fe;
-        color: #1a73e8;
-      }
-
-      &.NgxEditor-MenuItem__Dropdown-Wrapper-Open {
-        background-color: #e8f0fe;
-        color: #1a73e8;
-
-        .NgxEditor-MenuItem__Dropdown-Icon {
-          svg {
-            fill: #1a73e8;
-          }
-        }
-
-        .NgxEditor-MenuItem__Dropdown-Menu {
-          display: block;
-          color: initial;
-        }
-      }
+.NgxEditor__Seperator {
+  border-left: 1px solid #ccc;
+  margin: 0 5px;
+}
+
+.NgxEditor__Dropdown {
+  $self: &;
+  min-width: 4rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: $dropdown-menu-hover-bg-color;
+  }
+
+  #{ $self }__Text {
+    display: flex;
+    align-items: center;
+    padding: 0 0.3rem;
+
+    &::after {
+      display: inline-block;
+      content: "";
+      margin-left: 25px;
+      vertical-align: 0.255em;
+      border-top: 0.3rem solid;
+      border-right: 0.3rem solid transparent;
+      border-bottom: 0;
+      border-left: 0.3rem solid transparent;
     }
   }
 
-  .NgxEditor-MenuItem__Seperator {
-    border-left: 1px solid #ccc;
-    margin: 0 5px;
+  #{ $self }__DropdownMenu {
+    position: absolute;
+    left: 0;
+    top: 30px;
+    box-shadow: rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    border-radius: 4px;
+    background-color: white;
+    display: none;
+    z-index: 10;
+    width: 100%;
   }
 
-  .disabled {
-    opacity: 0.5;
-    pointer-events: none;
+  #{ $self }__Item {
+    padding: 0.5rem;
+    white-space: nowrap;
+    color: inherit;
+
+    &:hover {
+      background-color: darken($dropdown-item-active-bg-color, 2%);
+    }
   }
-}
 
-.NgxEditor-Content {
-  padding: 0.5rem;
-  white-space: pre-wrap;
+  &#{ $self }--Selected,
+  &#{ $self }--Open {
+    background-color: $menu-item-active-bg-color;
 
-  p {
-    margin: 0;
-    margin-bottom: 0.7rem;
+    #{ $self }__Text {
+      color: $menu-item-active-color;
+    }
+  }
+
+  #{ $self }--Active {
+    background-color: $dropdown-item-active-bg-color;
+
+    &:hover {
+      background-color: darken($dropdown-item-active-bg-color, 4%);
+    }
+  }
+
+  &#{ $self }--Open {
+    #{ $self }__DropdownMenu {
+      display: block;
+    }
   }
 }
 
-.NgxEditor-Placeholder {
+.NgxEditor__Placeholder {
   color: #6c757d;
   opacity: 1;
 }
+
+// prosemirror
+.ProseMirror {
+  outline: none;
+}
diff --git a/src/lib/ngx-editor.component.spec.ts b/src/lib/ngx-editor.component.spec.ts
@@ -33,6 +33,6 @@ describe('NgxEditorComponent', () => {
 
     const compiled: DebugElement = fixture.debugElement;
     // expect menubar to be rendered
-    expect(compiled.query(By.css('.NgxEditor-MenuBar'))).toBeDefined();
+    expect(compiled.query(By.css('.NgxEditor__MenuBar'))).toBeDefined();
   });
 });
diff --git a/src/lib/ngx-editor.component.ts b/src/lib/ngx-editor.component.ts
@@ -56,7 +56,6 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
   private updateContent(value: object) {
     try {
       const doc = this.parseDoc(value);
-
       const state = this.view.state;
       const tr = state.tr;
       tr.replaceWith(0, state.doc.content.size, doc);
@@ -88,7 +87,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
       nodeViews,
       dispatchTransaction: this.handleTransactions.bind(this),
       attributes: {
-        class: 'NgxEditor-Content'
+        class: 'NgxEditor__Content'
       },
     });
   }

diff --git a/src/lib/prosemirror/plugins/menu/MenuBarView.ts b/src/lib/prosemirror/plugins/menu/MenuBarView.ts
@@ -24,7 +24,7 @@ class MenuBarView {
 
   render() {
     const menuDom = document.createElement('div');
-    menuDom.className = 'NgxEditor-MenuBar';
+    menuDom.className = 'NgxEditor__MenuBar';
 
     const { update } = renderMenu(this.options, this.view, menuDom);
     this.updateMenuItems = update;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="NgxEditor-Wrapper" #ngxEditor></div>
		<div class="NgxEditor" #ngxEditor></div>