Some styles fixed

css/style.css

@@ -156,41 +156,44 @@
 
 .hide-delete-icon,
 .hide-modal-note {
-    display: none; /* Hidden by default */
+    display: none;
 }
 .show-delete-icon,
 .show-modal-note {
     display: block;
 }
 
+div[contenteditable="true"] {
+   margin: 0px;
+   padding: 0px;
+}
+
+#title-editable:active, #title-editable:hover, #title-editable:focus,
+#content-editable:active, #content-editable:hover, #content-editable:focus {
+  background-color: transparent !important;
+}
+
 #content-editable {
     width: 100%;
     min-height: 50px;
     word-wrap: break-word;
     background: none;
+    color: unset;
     border: none;
 }
 
 #title-editable {
     width: 100%;
     background: none;
+    color: unset;
     border: none;
 }
 
 .note-options {
-/*    position: absolute;*/
     bottom: 0;
     padding: 5px;
 }
 
-/* show placeholder text for empty notes */
-div[data-placeholder]:empty::before {
-  color: grey;
-}
-div[data-placeholder]:not([data-placeholder=""]):empty::before {
-  content: attr(data-placeholder);
-}
-
 #note-share-options {
     display: none;
     padding-bottom: 5px;
@@ -204,6 +207,11 @@ div[data-placeholder]:not([data-placeholder=""]):empty::before {
     padding-left: 5px;
 }
 
+.note-share-select {
+    width: 100%;
+    opacity: 0.5;
+}
+
 /* Modal Content */
 
 .modal-content {

js/script.js

@@ -24,65 +24,6 @@ var Notes = function (baseUrl) {
     this._activeNote = undefined;
 };
 
-var moveToUnselectedShare = function() {
-    var curr = $(this).clone();
-    var groupIndex = curr.html().indexOf('<span>(group)</span>');
-    var id = $('.note-active').data('id');
-    if(groupIndex >= 0) {
-        var groupId = curr.html().substring(0, groupIndex);
-        var formData = {
-            groupId : groupId,
-            noteId : id
-        };
-        $.post(OC.generateUrl('/apps/quicknotes/api/0.1/groups/removeshare'), formData, function(data){
-        });
-    } else {
-        var userId = curr.html();
-        var formData = {
-            userId : userId,
-            noteId : id
-        };
-        $.post(OC.generateUrl('/apps/quicknotes/api/0.1/users/removeshare'), formData, function(data){
-        });
-    }
-    curr.switchClass('selected-share', 'unselected-share', 0);
-    curr.hide();
-    curr.click(moveToSelectedShare);
-    $(curr).appendTo($('#share-neg'));
-    $(this).remove();
-    var pos = $('#share-pos');
-    if(pos.children().length == 0) pos.hide();
-}
-
-var moveToSelectedShare = function() {
-    var curr = $(this).clone();
-    var groupIndex = curr.html().indexOf('<span>(group)</span>');
-    var id = $('.note-active').data('id');
-    if(groupIndex >= 0) {
-        var groupId = curr.html().substring(0, groupIndex);
-        var formData = {
-            groupId : groupId,
-            noteId : id
-        };
-        $.post(OC.generateUrl('/apps/quicknotes/api/0.1/groups/addshare'), formData, function(data){
-        });
-    } else {
-        var userId = curr.html();
-        var formData = {
-            userId : userId,
-            noteId : id
-        };
-        $.post(OC.generateUrl('/apps/quicknotes/api/0.1/users/addshare'), formData, function(data){
-        });
-    }
-    curr.switchClass('unselected-share', 'selected-share', 0);
-    curr.click(moveToUnselectedShare);
-    $(curr).appendTo($('#share-pos'));
-    $(this).remove();
-    $('#share-pos').show();
-    $('#share-search').val('');
-}
-
 Notes.prototype = {
     load: function (id) {
         var self = this;
@@ -222,8 +163,8 @@ View.prototype = {
 
         var note = $('.notes-grid [data-id=' + id + ']').parent();
 
-        var title = note.find("#title-editable").html();
+        var title = note.find(".note-title").html();
-        var content = note.find("#content-editable").html();
+        var content = note.find(".note-content").html();
         var color = note.children().css("background-color");
         var colors = modal[0].getElementsByClassName("circle-toolbar");
         $.each(colors, function(i, c) {
@@ -264,6 +205,33 @@ View.prototype = {
                 'autolist': autolist
             }
         });
+        /*
+        var shareSelect = $('.note-share-select');
+        shareSelect.select2({
+            placeholder: "Share with users or groups",
+            allowClear: true,
+        });
+
+        var formData = {
+            noteId: id
+        }
+        $.post(OC.generateUrl('/apps/quicknotes/api/0.1/getusergroups'), formData, function(data) {
+            $.each(data.users, function(i, user) {
+                var newOption = new Option(user, user , false, false);
+                shareSelect.append(newOption);
+            });
+            shareSelect.trigger('change');
+
+            var sUsers = []
+            $.each(data.posUsers, function(i, user) {
+                var newOption = new Option(user, user , false, false);
+                shareSelect.append(newOption);
+                sUsers.push(user);
+            });
+            shareSelect.val(sUsers);
+            shareSelect.trigger('change');
+        });
+        */
 
         /* Positioning the modal to the original size */
         $(".modal-content").css({
@@ -292,6 +260,12 @@ View.prototype = {
             $(colortool).removeClass('icon-checkmark');
         });
 
+        /*
+        var shareSelect = $('.note-share-select');
+        shareSelect.val(null).trigger('change');
+        shareSelect.select2('destroy');
+        */
+
         this._notes.unsetActive();
 
         modal.removeClass("show-modal-note");
@@ -381,7 +355,7 @@ View.prototype = {
         // Remove note icon
         var self = this;
         $('#app-content').on("click", ".icon-delete-note", function (event) {
-            var note = $(this).parent();
+            var note = $(this).parent().parent();
             var id = parseInt(note.data('id'), 10);
 
             event.stopPropagation();
@@ -506,6 +480,19 @@ View.prototype = {
             var content = modalcontent.html();
             var color = self.colorToHex(modalnote.css("background-color"));
 
+            /*
+            var shareSelect = $('.note-share-select');
+            var shares = shareSelect.select2('data');
+            for (var i = 0; i < shares.length; i++) {
+                var user = shares[i].id;
+                var formData = {
+                    userId : user,
+                    noteId : id
+                };
+                $.post(OC.generateUrl('/apps/quicknotes/api/0.1/users/addshare'), formData, function(data){});
+            }
+            */
+
             self._notes.updateId(id, title, content, color).done(function () {
                 self._notes.unsetActive();
 
@@ -567,10 +554,13 @@ View.prototype = {
                     note = self._notes.getActive();
                     var $notehtml = $("<div class=\"note-grid-item\">" +
                                       "  <div class=\"quicknote noselect\" style=\"background-color: " + note.color + "\" data-id=\"" + note.id + "\">" +
-                                      "<div id='title-editable' class='note-title'>" + note.title + "</div>" +
+                                      "    <div>" +
-                                      "<button class=\"icon-delete hide-delete-icon icon-delete-note\" title=\"Delete\"></button>" +
+                                      "      <div class=\"icon-delete hide-delete-icon icon-delete-note\" title=\"Delete\"></div>" +
-                                      "<div id='content-editable' class='note-content'>" + note.content + "</div>" +
+                                      "      <div class=\"note-title\">" + note.title + "</div>" +
-                                      "</div></div>");
+                                      "    </div>" +
+                                      "    <div class=\"note-content\">" + note.content + "</div>" +
+                                      "  </div>" +
+                                      "</div>");
                     $(".notes-grid").prepend( $notehtml )
                                     .isotope({ filter: '*'})
                                     .isotope( 'prepended', $notehtml);

templates/part.note-modal-editable.php

@@ -1,25 +1,13 @@
 <div id="modal-note-div" class="hide-modal-note modal-note-background">
 	<div class="modal-content">
 		<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
+			<div>
 				<div contenteditable="true" id='title-editable' class='note-title'></div>
-			<div contenteditable="true" id='content-editable' class='note-content' data-placeholder="No content"></div>
+			</div>
+			<div contenteditable="true" id='content-editable' class='note-content'></div>
 			<div class="note-options">
-				<div class="save-button">
 				<!--
-					<button id='share-button'><?php p($l->t('Share'));?></button>
+				<select class="note-share-select" name="users[]" multiple="multiple"></select>
-					-->
-					<button id='cancel-button'><?php p($l->t('Cancel')); ?></button>
-					<button id='save-button'><?php p($l->t('Save')); ?></button>
-				</div>
-				<div style="clear: both;"></div>
-				<!--
-				<div id="note-share-options">
-					<ul id="share-pos">
-					</ul>
-					<input type="text" id="share-search" />
-					<ul id="share-neg">
-					</ul>
-				</div>
 				-->
 				<div class="note-toolbar">
 					<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
@@ -33,6 +21,14 @@
 					<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
 					<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
 				</div>
+				<div class="save-button">
+					<!--
+					<button id='share-button'><?php p($l->t('Share'));?></button>
+					-->
+					<button id='cancel-button'><?php p($l->t('Cancel')); ?></button>
+					<button id='save-button'><?php p($l->t('Save')); ?></button>
+				</div>
+				<div style="clear: both;"></div>
 			</div>
 		</div>
 	</div>

templates/part.note.php

@@ -1,15 +1,22 @@
 <div class="note-grid-item">
 	<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
 		{{#if isshared}}
-			<div class='icon-share shared-title' title="Shared by {{ userid }}"></div><div id='title' class='note-title'>{{{ title }}}</div>
+			<div>
+				<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
+				<div class='note-title'>{{{ title }}}</div>
+			</div>
 			<div id='content' class='note-content'>{{{ content }}}</div>
 		{{else}}
+			<div>
 				<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
+				<!--
 				{{#if sharedwith}}
 					<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
 				{{/if}}
-			<div id='title-editable' class='note-title'>{{{ title }}}</div>
+				-->
-			<div id='content-editable' class='note-content'>{{{ content }}}</div>
+				<div class='note-title'>{{{ title }}}</div>
+			</div>
+			<div class='note-content'>{{{ content }}}</div>
 		{{/if}}
 	</div>
 </div>