Properly render read-only notes from shared folders

plugins/kolab_notes/kolab_notes.php

@@ -160,7 +160,7 @@ class kolab_notes extends rcube_plugin
                 'name' => $fullname,
                 'listname' => $listname,
                 'editname' => $editname,
-                'editable' => !$readionly,
+                'editable' => !$readonly,
                 'norename' => $norename,
                 'parentfolder' => $path_imap,
                 'default' => $folder->default,

plugins/kolab_notes/kolab_notes_ui.php

@@ -46,7 +46,7 @@ class kolab_notes_ui
         $this->plugin->register_handler('plugin.listing', array($this, 'listing'));
         $this->plugin->register_handler('plugin.editform', array($this, 'editform'));
         $this->plugin->register_handler('plugin.notetitle', array($this, 'notetitle'));
-        #$this->plugin->register_handler('plugin.detailview', array($this, 'detailview'));
+        $this->plugin->register_handler('plugin.detailview', array($this, 'detailview'));
 
         $this->rc->output->include_script('list.js');
         $this->rc->output->include_script('treelist.js');
@@ -85,6 +85,7 @@ class kolab_notes_ui
         foreach ($this->plugin->get_lists() as $prop) {
             unset($prop['user_id']);
             $id = $prop['id'];
+            $class = '';
 
             if (!$prop['virtual'])
                 $jsenv[$id] = $prop;
@@ -136,6 +137,13 @@ class kolab_notes_ui
         return html::tag('form', $attrib, $textarea->show(), array_merge(html::$common_attrib, array('action')));
     }
 
+    public function detailview($attrib)
+    {
+        $attrib += array('id' => 'rcmkolabnotesdetailview');
+        $this->rc->output->add_gui_object('notesdetailview', $attrib['id']);
+        return html::div($attrib, '');
+    }
+
     public function notetitle($attrib)
     {
         $attrib += array('id' => 'rcmkolabnotestitle');

plugins/kolab_notes/notes.js

@@ -86,7 +86,7 @@ function rcube_kolab_notes_ui(settings)
         notebookslist.addEventListener('select', function(node) {
             var id = node.id;
             if (me.notebooks[id]) {
-                rcmail.enable_command('list-edit', 'list-remove', me.notebooks[id].editable);
+                rcmail.enable_command('createnote', 'list-edit', 'list-remove', me.notebooks[id].editable);
                 fetch_notes(id);  // sets me.notebooks[id]
             }
         });
@@ -214,7 +214,6 @@ function rcube_kolab_notes_ui(settings)
         tinyMCE.init(editor_conf);
 
         if (me.selected_list) {
-            rcmail.enable_command('createnote', true);
             notebookslist.select(me.selected_list)
         }
     }
@@ -408,16 +407,15 @@ function rcube_kolab_notes_ui(settings)
         }
 
         var list = me.notebooks[data.list] || me.notebooks[me.selected_list];
-            content = $('#notecontent').val(data.description);
+            content = $('#notecontent').val(data.description),
-        $('.notetitle', rcmail.gui_objects.noteviewtitle).val(data.title);
+            readonly = data.readonly || !list.editable;
+        $('.notetitle', rcmail.gui_objects.noteviewtitle).val(data.title).prop('disabled', readonly);
         $('.dates .notecreated', rcmail.gui_objects.noteviewtitle).html(Q(data.created || ''));
         $('.dates .notechanged', rcmail.gui_objects.noteviewtitle).html(Q(data.changed || ''));
         if (data.created || data.changed) {
             $('.dates', rcmail.gui_objects.noteviewtitle).show();
         }
 
-        $(rcmail.gui_objects.noteseditform).show();
-
         // tag-edit line
         var tagline = $('.tagline', rcmail.gui_objects.noteviewtitle).empty().show();
         $.each(typeof data.categories == 'object' && data.categories.length ? data.categories : [''], function(i,val){
@@ -436,32 +434,42 @@ function rcube_kolab_notes_ui(settings)
         $('.tagline input.tag', rcmail.gui_objects.noteviewtitle).tagedit({
             animSpeed: 100,
             allowEdit: false,
+            allowAdd: !readonly,
+            allowDelete: !readonly,
             checkNewEntriesCaseSensitive: false,
             autocompleteOptions: { source: tags, minLength: 0, noCheck: true },
             texts: { removeLinkTitle: rcmail.gettext('removetag', 'kolab_notes') }
         })
 
+        if (!readonly) {
             $('.tagedit-list', rcmail.gui_objects.noteviewtitle)
                 .on('click', function(){ $('.tagline .placeholder').hide(); });
+        }
 
         me.selected_note = data;
         me.selected_note.id = rcmail.html_identifier_encode(data.uid);
         rcmail.enable_command('save', list.editable && !data.readonly);
 
-        var html, node, editor = tinyMCE.get('notecontent');
+        var html = data.html || data.description;
-        if (editor) {
-            html = data.html || data.description;
 
         // convert plain text to HTML and make URLs clickable
         if (!data.html || !html.match(/<(html|body)/)) {
             html = text2html(html);
         }
 
+        var node, editor = tinyMCE.get('notecontent');
+        if (!readonly && editor) {
+            $(rcmail.gui_objects.notesdetailview).hide();
+            $(rcmail.gui_objects.noteseditform).show();
             editor.setContent(html);
             node = editor.getContentAreaContainer().childNodes[0];
             if (node) node.tabIndex = content.get(0).tabIndex;
             editor.getBody().focus();
         }
+        else {
+            $(rcmail.gui_objects.noteseditform).hide();
+            $(rcmail.gui_objects.notesdetailview).html(html).show();
+        }
 
         // Trigger resize (needed for proper editor resizing)
         $(window).resize();
@@ -608,6 +616,7 @@ function rcube_kolab_notes_ui(settings)
         $('.notetitle', rcmail.gui_objects.noteviewtitle).val('');
         $('.tagline, .dates', rcmail.gui_objects.noteviewtitle).hide();
         $(rcmail.gui_objects.noteseditform).hide();
+        $(rcmail.gui_objects.notesdetailview).hide();
         rcmail.enable_command('save', false);
     }
 

plugins/kolab_notes/skins/larry/folder_icons.png

@@ -0,0 +1 @@
+../../../kolab_addressbook/skins/larry/folder_icons.png

plugins/kolab_notes/skins/larry/notes.css

@@ -109,7 +109,9 @@
 	background: #f9f9f9;
 }
 
-.notesview #noteform {
+.notesview #noteform,
+.notesview #notedetails {
+	display: none;
 	position: absolute;
 	top: 82px;
 	left: 0;
@@ -117,6 +119,20 @@
 	width: 100%;
 }
 
+.notesview #notedetails {
+	padding: 8px;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	    -ms-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+
+.notesview #notedetails pre {
+	font-family: "Lucida Grande", Verdana,  Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	margin: 0;
+}
+
 .notesview #notecontent {
 	position: relative;
 	width: 100%;
@@ -227,17 +243,63 @@
 	white-space: nowrap;
 }
 
+.notesview #notebooks li.virtual {
+	height: 12px;
+}
+
 .notesview #notebooks li span.listname {
 	display: block;
 	position: absolute;
 	top: 7px;
 	left: 9px;
-	right: 26px;
+	right: 6px;
 	cursor: default;
 	padding-bottom: 2px;
-	padding-right: 30px;
+	padding-right: 26px;
 	color: #004458;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+.notesview #notebooks li.virtual span.listname {
+	color: #aaa;
+	top: 3px;
+}
+
+.notesview #notebooks li.readonly,
+.notesview #notebooks li.shared,
+.notesview #notebooks li.other {
+	background-image: url('folder_icons.png');
+	background-position: right -1000px;
+	background-repeat: no-repeat;
+}
+
+.notesview #notebooks li.readonly {
+	background-position: 98% -21px;
+}
+
+.notesview #notebooks li.other {
+	background-position: 98% -52px;
+}
+
+.notesview #notebooks li.other.readonly {
+	background-position: 98% -77px;
+}
+
+.notesview #notebooks li.shared {
+	background-position: 98% -103px;
+}
+
+.notesview #notebooks li.shared.readonly {
+	background-position: 98% -130px;
+}
+
+.notesview #notebooks li.other.readonly span.listname,
+.notesview #notebooks li.shared.readonly span.listname {
+	padding-right: 36px;
+}
+
+.notesview #notebooks li.selected > a {
+	background-color: transparent;
+}

plugins/kolab_notes/skins/larry/templates/notes.html

@@ -92,7 +92,7 @@ $(document).ready(function(e){
 
     function layout_view()
     {
-        var form = $('#noteform'),
+        var form = $('#noteform, #notedetails'),
             content = $('#notecontent'),
             header = $('#notedetailstitle'),
             w, h;