static/css/oml.css

@@ -1,7 +0,0 @@
-.OMLQuote {
-    background-color: rgb(255, 255, 255);
-}
-
-.OMLAnnotation.selected .OMLQuote {
-    background-color: rgb(128, 192, 255);
-}

static/html/oml.html

@@ -4,7 +4,6 @@
         <title>Open Media Library</title>
         <meta charset="UTF-8"/>
         <link href="/static/png/oml.png" rel="icon" type="image/png">
-        <link href="/static/css/oml.css" rel="stylesheet" type="text/css">
         <script src="/static/js/oml.js?1" type="text/javascript"></script>
         <meta name="google" value="notranslate"/>
     </head>

static/js/annotation.js

@@ -1,22 +1,7 @@
 'use strict';
 
 oml.ui.annotation = function(annotation, $iframe) {
-    var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
-        backgroundColor: 'white',
-        color: 'black',
-        fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
-        fontSize: '14px',
-        lineHeight: '21px',
-        padding: '8px'
-    }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
-        click: function(event) {
-            that.select()
-            $iframe.postMessage('selectAnnotation', {
-                id: annotation.id
-            })
-        }
-    })
-    var $note = Ox.ArrayEditable({
+    var $arrayEditable = Ox.ArrayEditable({
         editing: true,
         items: (annotation.comments || []).map(function(comment) {
             comment.editable = true
@@ -24,8 +9,7 @@ oml.ui.annotation = function(annotation, $iframe) {
         }),
         type: 'textarea'
     }).css({
-        margin: '2px',
-        minHeight: '12px'
+        minHeight: '16px'
     }).bindEvent({
         submit: function(data) {
             var comment = Ox.getObjectById(annotation.comments, data.id)
@@ -46,23 +30,32 @@ oml.ui.annotation = function(annotation, $iframe) {
     var that = Ox.Element().attr({
         id: 'a-' + annotation.id
     }).addClass(
-        'OxSelectable OMLAnnotation'
+        'OxSelectable'
     ).css({
         borderBottom: '1px solid rgb(208, 208, 208)',
-    }).append($quote).append($note);
-
+    }).append(
+        Ox.Element().addClass('OxSelectable').css({
+            backgroundColor: 'white',
+            color: 'black',
+            fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
+            fontSize: '14px',
+            lineHeight: '21px',
+            padding: '8px'
+        }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
+            click: function(event) {
+                $iframe.postMessage('selectAnnotation', {
+                    id: annotation.id
+                })
+            }
+        })
+    ).append($arrayEditable);
     that.annotate = function() {
         var item = {
             id: 'note', value: '', editable: true
         }
-    }
-    that.deselect = function() {
-        that.removeClass('selected')
-    }
-    that.select = function () {
-        let selected = document.querySelector('.OMLAnnotation.selected')
-        selected && selected.classList.remove('selected')
-        that.addClass('selected')
+        $arrayEditable.addItem(0, item)
+            .options({selected: item.id})
+            .editItem();
     }
     return that;
 };

static/js/annotationPanel.js

@@ -8,31 +8,18 @@ oml.ui.annotationPanel = function() {
         disabled: true,
         style: 'symbol',
         title: 'add',
-        tooltip: Ox._('Add Quote'),
         type: 'image'
     }).appendTo($bar);
 
     var $menuButton = Ox.MenuButton({
         items: [
-            {id: 'showAnnotations', title: Ox._('Show Annotations'), disabled: true},
-            {group: 'sort', min: 1, max: 1, items: [
-                {id: 'all', title: Ox._('All Annotations'), checked: true},
-                {id: 'my', title: Ox._('My Annotations'), checked: false},
-            ]},
-            {},
-            {id: 'sortAnnotations', title: Ox._('Sort Annotations'), disabled: true},
-            {group: 'sort', min: 1, max: 1, items: [
-                {id: 'position', title: Ox._('By Position'), checked: true},
-                {id: 'text', title: Ox._('By Note Text'), checked: false},
-                {id: 'date', title: Ox._('By Date Added'), checked: false}
-            ]},
+            {id: 'sortAnnotations', title: 'Sort Annotations', disabled: true}
         ],
         style: 'square',
         title: 'set',
         type: 'image',
         width: 16
     }).css({
-        // borderColor: 'transparent',
         float: 'right'
     }).appendTo($bar);