diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx index a6b4725..3393c3d 100644 --- a/src/editor/Editor.jsx +++ b/src/editor/Editor.jsx @@ -144,8 +144,8 @@ const Editor = props => { return (
-
-
+
+
{widgets.map(widget => React.cloneElement(widget, { annotation : currentAnnotation, diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx index 7de63ce..cf17846 100644 --- a/src/editor/widgets/comment/Comment.jsx +++ b/src/editor/widgets/comment/Comment.jsx @@ -27,10 +27,10 @@ const Comment = props => { } const creatorInfo = props.body.creator && -
- {props.body.creator.name || props.body.creator.id} +
+ {props.body.creator.name || props.body.creator.id} { props.body.created && - + } @@ -53,7 +53,7 @@ const Comment = props => { { creatorInfo }
setIsMenuVisible(!isMenuVisible)}>
diff --git a/src/editor/widgets/comment/DropdownMenu.jsx b/src/editor/widgets/comment/DropdownMenu.jsx index 6c262e3..86b4da8 100644 --- a/src/editor/widgets/comment/DropdownMenu.jsx +++ b/src/editor/widgets/comment/DropdownMenu.jsx @@ -11,7 +11,7 @@ const DropdownMenu = props => { useClickOutside(ref, () => props.onClickOutside()); return ( -
    +
    • {i18n.t('Edit')}
    • {i18n.t('Delete')}
    diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx index ed802f9..38d65ec 100644 --- a/src/editor/widgets/tag/TagWidget.jsx +++ b/src/editor/widgets/tag/TagWidget.jsx @@ -57,18 +57,18 @@ const TagWidget = props => { } return ( -
    +
    { tags.length > 0 &&
      { tags.map(tag =>
    • - {tag.value} + {tag.value} {!props.readOnly && - - - + + + diff --git a/src/relations/Handle.js b/src/relations/Handle.js index ae3b74f..41386df 100644 --- a/src/relations/Handle.js +++ b/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')); } diff --git a/src/relations/RelationsLayer.scss b/src/relations/RelationsLayer.scss index 7a18257..7cd2723 100644 --- a/src/relations/RelationsLayer.scss +++ b/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%); } diff --git a/src/relations/drawing/DrawingTool.js b/src/relations/drawing/DrawingTool.js index 820c4eb..f914682 100644 --- a/src/relations/drawing/DrawingTool.js +++ b/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); diff --git a/src/relations/editor/RelationEditor.jsx b/src/relations/editor/RelationEditor.jsx index 25c99a3..7d08af0 100644 --- a/src/relations/editor/RelationEditor.jsx +++ b/src/relations/editor/RelationEditor.jsx @@ -88,13 +88,13 @@ export default class RelationEditor extends Component {
      diff --git a/src/selection/SelectionHandler.js b/src/selection/SelectionHandler.js index 38b1867..69dd9a8 100644 --- a/src/selection/SelectionHandler.js +++ b/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) { diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss index 3126a63..a0f9e32 100644 --- a/themes/default/editor/_editor.scss +++ b/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; } diff --git a/themes/default/editor/widgets/comment/_comment.scss b/themes/default/editor/widgets/comment/_comment.scss index 9c62a90..a83281d 100644 --- a/themes/default/editor/widgets/comment/_comment.scss +++ b/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; diff --git a/themes/default/editor/widgets/tag/_tag.scss b/themes/default/editor/widgets/tag/_tag.scss index 9452bcd..e27a19e 100644 --- a/themes/default/editor/widgets/tag/_tag.scss +++ b/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; } diff --git a/themes/default/editor/widgets/type/_typeSelector.scss b/themes/default/editor/widgets/type/_typeSelector.scss deleted file mode 100644 index 7536055..0000000 --- a/themes/default/editor/widgets/type/_typeSelector.scss +++ /dev/null @@ -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; - } - -} \ No newline at end of file diff --git a/themes/default/globals/includes/_buttons.scss b/themes/default/globals/includes/_buttons.scss index e34ac8c..f811279 100644 --- a/themes/default/globals/includes/_buttons.scss +++ b/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 { diff --git a/themes/default/globals/includes/_mixins.scss b/themes/default/globals/includes/_mixins.scss index 8f91f38..f77a6a7 100644 --- a/themes/default/globals/includes/_mixins.scss +++ b/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; - -khtml-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; + -webkit-user-select:none; + -khtml-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; } \ No newline at end of file diff --git a/themes/default/highlights/_highlights.scss b/themes/default/highlights/_highlights.scss index 1d47403..bf10072 100644 --- a/themes/default/highlights/_highlights.scss +++ b/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; } diff --git a/themes/default/theme.scss b/themes/default/theme.scss index 781216e..dbaa0c3 100644 --- a/themes/default/theme.scss +++ b/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;