update annotation layout

static/js/annotation.js

@@ -6,19 +6,28 @@ oml.ui.annotation = function(data, $iframe) {
     }).addClass(
         'OxSelectable'
     ).css({
-        backgroundColor: 'white',
         borderBottom: '1px solid rgb(208, 208, 208)',
-        color: 'black',
-        fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
-        fontSize: '14px',
-        lineHeight: '21px',
-        padding: '8px'
-    }).html(data.text).on({
-        click: function(event) {
-            $iframe.postMessage('selectAnnotation', {
-                id: data.id
-            })
-        }
-    });
+    }).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(data.text).on({
+            click: function(event) {
+                $iframe.postMessage('selectAnnotation', {
+                    id: data.id
+                })
+            }
+        })
+    ).append(
+        Ox.ArrayEditable({
+            type: 'textarea'
+        }).css({
+            height: 0
+        })
+    );
     return that;
 };

static/js/annotationFolder.js

@@ -0,0 +1,10 @@
+oml.ui.annotationFolder = function() {
+
+    var ui = oml.user.ui,
+        that = Ox.Element().css({
+            overflowY: 'auto',
+        });
+
+    return that;
+
+};

static/js/annotationPanel.js

@@ -3,9 +3,19 @@
 oml.ui.annotationPanel = function() {
 
     var ui = oml.user.ui,
-        that = Ox.Element().css({
-            overflowY: 'auto',
-        });
+        that = Ox.SplitPanel({
+            elements: [
+                {
+                    element: Ox.Bar({size: 16}),
+                    size: 16
+                },
+                {
+                    element: oml.$ui.annotationFolder = oml.ui.annotationFolder()
+                }
+            ],
+            orientation: 'vertical'
+        })
 
     return that;
+
 };

static/js/viewer.js

@@ -25,6 +25,8 @@ oml.ui.viewer = function() {
                         collapsed: !ui.showAnnotations,
                         collapsible: true,
                         element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
+                        resizable: true,
+                        resize: [128, 384],
                         size: 256,
                         tooltip: Ox._('Annotations')
                             + ' <span class="OxBright">'
@@ -41,7 +43,7 @@ oml.ui.viewer = function() {
         if (item && item.length) {
             oml.api.get({id: item, keys: ['mediastate']}, function(result) {
                 if (result.data.mediastate == 'available') {
-                    oml.$ui.annotationPanel.empty()
+                    oml.$ui.annotationFolder.empty()
                     if ($iframe) {
                         $iframe.remove()
                     }
@@ -53,10 +55,10 @@ oml.ui.viewer = function() {
                         console.log('got', event, data)
                         if (event == 'addAnnotation') {
                             console.log('adding', data.id)
-                            oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
+                            oml.$ui.annotationFolder.append(oml.ui.annotation(data, $iframe));
                         } else if (event == 'removeAnnotation') {
                             console.log('do it ...', data)
-                            oml.$ui.annotationPanel.find('#a-' + data.id).remove()
+                            oml.$ui.annotationFolder.find('#a-' + data.id).remove()
                         } else if (event == 'selectAnnotation') {
                             console.log('select', data)
                         } else if (event == 'deselectAnnotation') {