Proper CSS class prefixing for editor

src/editor/Editor.jsx

@@ -144,8 +144,8 @@ const Editor = props => {
 
   return (
     <div ref={element} className="r6o-editor">
-      <div className="arrow" />
+      <div className="r6o-arrow" />
-      <div className="inner">
+      <div className="r6o-editor-inner">
         {widgets.map(widget => 
           React.cloneElement(widget, { 
             annotation : currentAnnotation,

src/editor/widgets/comment/Comment.jsx

@@ -27,10 +27,10 @@ const Comment = props => {
   }
 
   const creatorInfo = props.body.creator && 
-    <div className="lastmodified">
+    <div className="r6o-lastmodified">
-      <span className="lastmodified-by">{props.body.creator.name || props.body.creator.id}</span>
+      <span className="r6o-lastmodified-by">{props.body.creator.name || props.body.creator.id}</span>
       { props.body.created && 
-        <span className="lastmodified-at">
+        <span className="r6o-lastmodified-at">
           <TimeAgo datetime={props.env.toClientTime(props.body.created)} />
         </span> 
       }
@@ -53,7 +53,7 @@ const Comment = props => {
       { creatorInfo }
 
       <div 
-        className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"} 
+        className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-menu-open" : "r6o-icon r6o-arrow-down"} 
         onClick={() => setIsMenuVisible(!isMenuVisible)}>
         <ChevronDownIcon width={12} />
       </div>

src/editor/widgets/comment/DropdownMenu.jsx

@@ -11,7 +11,7 @@ const DropdownMenu = props => {
   useClickOutside(ref, () => props.onClickOutside());
 
   return (
-    <ul ref={ref} className="comment-dropdown-menu">
+    <ul ref={ref} className="r6o-comment-dropdown-menu">
       <li onClick={props.onEdit}>{i18n.t('Edit')}</li>
       <li onClick={props.onDelete}>{i18n.t('Delete')}</li>
     </ul>

src/editor/widgets/tag/TagWidget.jsx

@@ -57,18 +57,18 @@ const TagWidget = props => {
   }
 
   return (
-    <div className="r6o-widget tag">
+    <div className="r6o-widget r6o-tag">
       <div>
         { tags.length > 0 &&
           <ul className="r6o-taglist">
             { tags.map(tag =>
               <li key={tag.value} onClick={toggle(tag.value)}>
-                <span className="label">{tag.value}</span>
+                <span className="r6o-label">{tag.value}</span>
 
                 {!props.readOnly &&
-                  <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
+                  <CSSTransition in={showDelete === tag.value} timeout={200} classNames="r6o-delete">
-                    <span className="delete-wrapper" onClick={onDelete(tag)}>
+                    <span className="r6o-delete-wrapper" onClick={onDelete(tag)}>
-                      <span className="delete">
+                      <span className="r6o-delete">
                         <CloseIcon width={12} />
                       </span>
                     </span>

src/relations/Handle.js

@@ -42,7 +42,7 @@ export default class Handle extends EventEmitter {
     this.rect.setAttribute('width', Math.round(this.bounds.width) + 5);
     this.rect.setAttribute('height',  Math.round(this.bounds.height));
 
-    this.arrow.setAttribute('class', 'arrow');    
+    this.arrow.setAttribute('class', 'r6o-arrow');    
 
     this.rect.addEventListener('click', () => this.emit('click'));
   }

src/relations/RelationsLayer.scss

@@ -39,7 +39,7 @@ $line-color:#3f3f3f;
     stroke-dasharray:2,3;
   }
 
-  path.arrow {
+  path.r6o-arrow {
     stroke-width:1.8;
     fill:lighten($line-color, 25%);
   }

src/relations/drawing/DrawingTool.js

@@ -31,7 +31,7 @@ export default class DrawingTool extends EventEmitter {
   }
 
   attachHandlers = () => {
-    this.contentEl.classList.add('noselect');
+    this.contentEl.classList.add('r6o-noselect');
 
     this.contentEl.addEventListener('mousedown', this.onMouseDown);
     this.contentEl.addEventListener('mousemove', this.onMouseMove);
@@ -44,7 +44,7 @@ export default class DrawingTool extends EventEmitter {
   }
 
   detachHandlers = () => {
-    this.contentEl.classList.remove('noselect');
+    this.contentEl.classList.remove('r6o-noselect');
 
     this.contentEl.removeEventListener('mousedown', this.onMouseDown);
     this.contentEl.removeEventListener('mousemove', this.onMouseMove);

src/relations/editor/RelationEditor.jsx

@@ -88,13 +88,13 @@ export default class RelationEditor extends Component {
 
         <div className="buttons">
           <span 
-            className="icon delete"
+            className="r6o-icon delete"
             onClick={this.onDelete}>
             <TrashIcon width={14} />
           </span>
 
           <span
-            className="icon ok"
+            className="r6o-icon ok"
             onClick={this.onSubmit}>
             <CheckIcon width={14} />
           </span>

src/selection/SelectionHandler.js

@@ -100,7 +100,7 @@ export default class SelectionHandler extends EventEmitter {
   }
 
   _hideNativeSelection = () => {
-    this.el.classList.add('hide-selection');
+    this.el.classList.add('r6o-hide-selection');
   }
 
   clearSelection = () => {
@@ -117,7 +117,7 @@ export default class SelectionHandler extends EventEmitter {
       document.selection.empty();
     }
 
-    this.el.classList.remove('hide-selection');
+    this.el.classList.remove('r6o-hide-selection');
 
     const spans = Array.prototype.slice.call(this.el.querySelectorAll('.r6o-selection'));
     if (spans) {

themes/default/editor/_editor.scss

@@ -2,7 +2,6 @@
 @import "widgets/textentry";
 @import "widgets/comment/comment";
 @import "widgets/tag/tag";
-@import "widgets/type/typeSelector";
 
 .r6o-editor {
   position:absolute;
@@ -20,7 +19,7 @@
      -moz-transition:opacity 0.1s ease-in-out;
           transition:opacity 0.1s ease-in-out;
 
-  .arrow {
+  .r6o-arrow {
     position:absolute;
     overflow:hidden;
     top:-12px;
@@ -29,7 +28,7 @@
     height:12px;
   }
 
-  .arrow:after {
+  .r6o-arrow:after {
     content:'';
     position:absolute;
     top:5px;
@@ -40,7 +39,7 @@
     @include rotate(45deg);
   }
 
-  .inner {
+  .r6o-editor-inner {
     background-color:#fff;
     @include rounded-corners(2px);
     @include box-shadow(2px, 2px, 42px, 0.4);
@@ -68,7 +67,7 @@
 .r6o-editor.align-right {
   margin-left:8px;
 
-  .arrow {
+  .r6o-arrow {
     left:auto;
     right:12px;
   }
@@ -78,12 +77,12 @@
 .r6o-editor.align-bottom {
   margin-bottom:14px;
 
-  .arrow {
+  .r6o-arrow {
     top:auto;
     bottom:-12px;
   }
 
-  .arrow::after {
+  .r6o-arrow::after {
     top:-11px;
     box-shadow:none;
   }

themes/default/editor/widgets/comment/_comment.scss

@@ -9,7 +9,7 @@
     padding:8px 10px;
   }
 
-  .lastmodified {
+  .r6o-lastmodified {
     border:1px solid $lightgrey-border;
     display:inline-block;
     border-radius:2px;
@@ -18,14 +18,14 @@
     line-height:100%;
     font-size:12px;
 
-    .lastmodified-at {
+    .r6o-lastmodified-at {
       color:$lightgrey-type;
       padding-left:3px;
     }
     
   }
 
-  .arrow-down {
+  .r6o-arrow-down {
     position:absolute;
     height: 20px;
     width: 20px;
@@ -40,11 +40,11 @@
     @include rounded-corners(1px);
   }
 
-  .arrow-down.menu-open {
+  .r6o-arrow-down.r6o-menu-open {
     border-color:$ocean;
   }
 
-  .comment-dropdown-menu {
+  .r6o-comment-dropdown-menu {
     position:absolute;
     top:32px;
     right:8px;

themes/default/editor/widgets/tag/_tag.scss

@@ -1,4 +1,4 @@
-.tags:empty {
+.r6o-tags:empty {
   display:none;
 }
 
@@ -8,7 +8,7 @@
   .r6o-widget.tag .r6o-taglist li {
     height:27px;
 
-    .delete-wrapper .delete {
+    .r6o-delete-wrapper .r6o-delete {
       position:relative;
       top:-4px;
     }
@@ -16,7 +16,7 @@
 
 }
 
-.r6o-widget.tag {
+.r6o-widget.r6o-tag {
   background-color:$blueish-white;
   border-bottom:1px solid $lightgrey-border;
   padding:1px 3px;
@@ -45,16 +45,16 @@
       cursor:pointer;
       position:relative;
       line-height:180%;
-      @include noselect();
+      @include r6o-noselect();
       @include rounded-corners(2px);
       @include box-shadow(0, 0, 4px, 0.1);
 
-      .label {
+      .r6o-label {
         padding:2px 8px;
         display:inline-block;
       }
 
-      .delete-wrapper {
+      .r6o-delete-wrapper {
         display:inline-block;
         padding:2px 0;
         color:#fff;
@@ -63,14 +63,8 @@
         background-color:$ocean;
         @include rounded-corners-right(2px);
 
-        .delete {
+        .r6o-delete {
           padding:2px 6px;
-
-          .icon {
-            height:11px;
-            padding-bottom:1px;
-          }
-
         }
 
         svg {
@@ -79,20 +73,20 @@
 
       }
 
-      .delete-enter-active {
+      .r6o-delete-enter-active {
         width:24px;
         transition:width 200ms;
       }
 
-      .delete-enter-done {
+      .r6o-delete-enter-done {
         width:24px;
       }
 
-      .delete-exit {
+      .r6o-delete-exit {
         width:24px;
       }
 
-      .delete-exit-active {
+      .r6o-delete-exit-active {
         width:0;
         transition:width 200ms;
       }

themes/default/editor/widgets/type/_typeSelector.scss

@@ -1,30 +0,0 @@
-.type-selector {
-  display:flex;  
-  border-bottom:1px solid $lightgrey-border;
-
-  .type {
-    flex:1;
-    text-align:center;
-    padding:7px;
-    font-size:14px;
-  }
-
-  .type {
-    cursor:pointer;
-    border-right:1px solid $lightgrey-border;
-  }
-
-  .type:last-child {
-    border-right:none;
-  }
-
-  .type:hover {
-    background-color:$blueish-white-hi;;
-  }
-
-  .icon {
-    margin:0 3px 1px 0;
-    height:13px;
-  }
-
-}

themes/default/globals/includes/_buttons.scss

@@ -14,8 +14,14 @@
   min-width:70px;
   vertical-align:middle;
   @include rounded-corners(2px);
-  * { vertical-align:middle; }
+
-  .icon { margin-right:4px; }
+  * { 
+    vertical-align:middle; 
+  }
+
+  .r6o-icon { 
+    margin-right:4px; 
+  }
 }
 
 .r6o-btn:disabled {

themes/default/globals/includes/_mixins.scss

@@ -53,11 +53,11 @@
           transform:rotate($angle);
 }
 
-@mixin noselect() {
+@mixin r6o-noselect() {
   -webkit-touch-callout:none;
-  -webkit-user-select:none;
+    -webkit-user-select:none;
-  -khtml-user-select:none;
+     -khtml-user-select:none;
-  -moz-user-select:none;
+       -moz-user-select:none;
-  -ms-user-select:none;
+        -ms-user-select:none;
-  user-select:none;
+            user-select:none;
 }

themes/default/highlights/_highlights.scss

@@ -9,10 +9,10 @@
   cursor:pointer;
 }
 
-.hide-selection::selection, .hide-selection ::selection {
+.r6o-hide-selection::selection, .r6o-hide-selection ::selection {
   background: transparent;
 }
 
-.hide-selection::-moz-selection .hide-selection ::-moz-selection{
+.r6o-hide-selection::-moz-selection .r6o-hide-selection ::-moz-selection{
   background: transparent;
 }

themes/default/theme.scss

@@ -3,7 +3,7 @@
 @import "editor/editor";
 @import "relations/editor";
 
-.noselect {
+.r6o-noselect {
   -webkit-touch-callout:none;
   -webkit-user-select:none;
    -khtml-user-select:none;