fix: use unique class names

sibiraj-s · Oct 9, 2017 · 3ddc3b0 · 3ddc3b0
1 parent b349c75
commit 3ddc3b0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-editor",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "WYSIWYG Editor for Angular Applications",
   "license": "MIT",
   "scripts": {

diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html
@@ -1,89 +1,99 @@
 <div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
-  <div class="toolbar">
-    <div class="set">
-      <button *ngIf="canEnableToolbarOptions('bold')" (click)="executeCommand('bold')" title="Bold">
+  <div class="ngx-toolbar">
+    <div class="ngx-toolbar-set">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="executeCommand('bold')" title="Bold">
         <i class="fa fa-bold" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('italic')" (click)="executeCommand('italic')" title="Italic">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('italic')" (click)="executeCommand('italic')" title="Italic">
         <i class="fa fa-italic" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('underline')" (click)="executeCommand('underline')" title="Underline">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('underline')" (click)="executeCommand('underline')" title="Underline">
         <i class="fa fa-underline" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="executeCommand('strikeThrough')" title="Strikethrough">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="executeCommand('strikeThrough')"
+        title="Strikethrough">
         <i class="fa fa-strikethrough" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('superscript')" (click)="executeCommand('superscript')" title="Superscript">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('superscript')" (click)="executeCommand('superscript')"
+        title="Superscript">
         <i class="fa fa-superscript" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('subscript')" (click)="executeCommand('subscript')" title="Subscript">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('subscript')" (click)="executeCommand('subscript')" title="Subscript">
         <i class="fa fa-subscript" aria-hidden="true"></i>
       </button>
     </div>
-    <div class="set">
-      <button *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="executeCommand('justifyLeft')" title="Justify Left">
+    <div class="ngx-toolbar-set">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="executeCommand('justifyLeft')"
+        title="Justify Left">
         <i class="fa fa-align-left" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="executeCommand('justifyCenter')" title="Justify Center">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="executeCommand('justifyCenter')"
+        title="Justify Center">
         <i class="fa fa-align-center" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('justifyRight')" (click)="executeCommand('justifyRight')" title="Justify Right">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyRight')" (click)="executeCommand('justifyRight')"
+        title="Justify Right">
         <i class="fa fa-align-right" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('justifyFull')" (click)="executeCommand('justifyFull')" title="Justify">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyFull')" (click)="executeCommand('justifyFull')"
+        title="Justify">
         <i class="fa fa-align-justify" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('indent')" (click)="executeCommand('indent')" title="Indent">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('indent')" (click)="executeCommand('indent')" title="Indent">
         <i class="fa fa-indent" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('outdent')" (click)="executeCommand('outdent')" title="Outdent">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('outdent')" (click)="executeCommand('outdent')" title="Outdent">
         <i class="fa fa-outdent" aria-hidden="true"></i>
       </button>
     </div>
-    <div class="set">
-      <button *ngIf="canEnableToolbarOptions('cut')" (click)="executeCommand('cut')" title="Cut">
+    <div class="ngx-toolbar-set">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('cut')" (click)="executeCommand('cut')" title="Cut">
         <i class="fa fa-scissors" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('copy')" (click)="executeCommand('copy')" title="Copy">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('copy')" (click)="executeCommand('copy')" title="Copy">
         <i class="fa fa-files-o" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('delete')" (click)="executeCommand('delete')" title="Delete">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('delete')" (click)="executeCommand('delete')" title="Delete">
         <i class="fa fa-trash" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('removeFormat')" (click)="executeCommand('removeFormat')" title="Clear Formatting">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeFormat')" (click)="executeCommand('removeFormat')"
+        title="Clear Formatting">
         <i class="fa fa-eraser" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('undo')" (click)="executeCommand('undo')" title="Undo">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('undo')" (click)="executeCommand('undo')" title="Undo">
         <i class="fa fa-undo" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('redo')" (click)="executeCommand('redo')" title="Redo">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('redo')" (click)="executeCommand('redo')" title="Redo">
         <i class="fa fa-repeat" aria-hidden="true"></i>
       </button>
     </div>
-    <div class="set">
-      <button *ngIf="canEnableToolbarOptions('paragraph')" (click)="executeCommand('insertParagraph')" title="Paragraph">
+    <div class="ngx-toolbar-set">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('paragraph')" (click)="executeCommand('insertParagraph')"
+        title="Paragraph">
         <i class="fa fa-paragraph" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('blockquote')" (click)="blockQuote()" title="Blockquote">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('blockquote')" (click)="blockQuote()" title="Blockquote">
         <i class="fa fa-quote-left" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="removeQuote()" title="Remove Blockquote">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="removeQuote()" title="Remove Blockquote">
         <i class="fa fa-quote-right" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="executeCommand('insertHorizontalRule')" title="Horizontal Line">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="executeCommand('insertHorizontalRule')"
+        title="Horizontal Line">
         <i class="fa fa-minus" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('orderedList')" (click)="executeCommand('insertUnorderedList')" title="Unodered List">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('orderedList')" (click)="executeCommand('insertUnorderedList')"
+        title="Unodered List">
         <i class="fa fa-list-ul" aria-hidden="true"></i>
       </button>
-      <button *ngIf="canEnableToolbarOptions('unorderedList')" (click)="executeCommand('insertOrderedList')" title="Ordered List">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unorderedList')" (click)="executeCommand('insertOrderedList')"
+        title="Ordered List">
         <i class="fa fa-list-ol" aria-hidden="true"></i>
       </button>
     </div>
   </div>
-  <div class="textarea ngx-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']"
-    (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)" [attr.translate]="config['translate']"
-    [attr.spellcheck]="config['spellcheck']" [style.height]="config['height']" [style.minHeight]="minHeight || config['minHeight']"
+  <div class="ngx-editor-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)"
+    [attr.translate]="config['translate']" [attr.spellcheck]="config['spellcheck']" [style.height]="config['height']" [style.minHeight]="minHeight || config['minHeight']"
     [style.resize]="canResize()" #ngxTextArea></div>
   <app-ngx-grippie *ngIf="resizer === 'stack'"></app-ngx-grippie>
 </div>
diff --git a/src/app/ngx-editor/ngx-editor.component.scss b/src/app/ngx-editor/ngx-editor.component.scss
@@ -8,18 +8,18 @@
         content: attr(placeholder);
         display: block; // for firefox
     }
-    .toolbar {
+    .ngx-toolbar {
         background-color: #f5f5f5;
         border-bottom: 1px solid #ddd;
         font-size: 0.8rem;
         padding: 0.2rem;
         border: 1px solid #ddd;
-        .set {
+        .ngx-toolbar-set {
             display: inline-block;
             border: 1px solid #ddd;
             border-radius: 5px;
             background-color: white;
-            button {
+            .ngx-editor-button {
                 background-color: #f5f5f5;
                 background-color: transparent;
                 border: 0;
@@ -42,7 +42,7 @@
             }
         }
     }
-    .textarea {
+    .ngx-editor-textarea {
         min-height: 5rem;
         padding: 0.5rem 0.8rem 1rem 0.8rem;
         border: 1px solid #ddd;
@@ -59,8 +59,4 @@
             padding-left: 0.5rem;
         }
     }
-}
-
-.hide {
-    display: none !important;
 }
diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html
@@ -1,4 +1,4 @@
-<div class="grippie">
+<div class="ngx-editor-grippie">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="651.6 235 26 5"
     width="26" height="5">
     <g id="sprites">

diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss
@@ -1,4 +1,4 @@
-.grippie {
+.ngx-editor-grippie {
     height: 9px;
     background-color: #f1f1f1;
     position: relative;