New toolbar temp

customize.dist/ckeditor-config.js

@@ -38,7 +38,7 @@ CKEDITOR.editorConfig = function( config ) {
 
     //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/'
     //skin: 'flat,/pad/themes/flat/'
-    //skin: 'moono-lisa,/pad/themes/moono-lisa/'
+    config.skin= 'moono-lisa,/pad/themes/moono-lisa/'
     //skin: 'moono-dark,/pad/themes/moono-dark/'
     //skin: 'office2013,/pad/themes/office2013/'
 };

customize.dist/src/less/toolbar.less

@@ -28,6 +28,8 @@
     box-sizing: border-box;
     padding: 0px 6px;
 
+    background-color: #BBBBFF;
+
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -321,13 +323,12 @@
     height: 32px;
     position: relative;
     .cryptpad-title {
-        .title, .pencilIcon {
+        .title, .pencilIcon, .saveIcon {
             font-size: 1.5em;
             vertical-align: middle;
             line-height: 32px;
         }
         .pencilIcon {
-            //display: none;
             margin-left: 11px;
             &:hover {
                 color: #999;
@@ -337,6 +338,22 @@
                 cursor: pointer;
             }
         }
+        .saveIcon {
+            cursor: pointer;
+            border: 1px solid black;
+            border-radius: 0px 2px 2px 0px;
+            background: white;
+            padding: 5px;
+            display: inline;
+            margin-left: -1px;
+            border-collapse: collapse;
+            &:hover {
+                color: #999;
+            }
+            span {
+                cursor: pointer;
+            }
+        }
         &:not(input):hover {
             .editable {
                 border: 1px solid #888;
@@ -410,6 +427,7 @@
     }
 }
 .cryptpad-toolbar-leftside {
+    height: 32px;
     float: left;
     margin-bottom: -1px;
     .cryptpad-dropdown-users {
@@ -427,6 +445,7 @@
     }
 }
 .cryptpad-toolbar-rightside {
+    height: 32px;
     text-align: right;
 }
 .cryptpad-toolbar-history {

customize.dist/toolbar.css

@@ -101,6 +101,7 @@
 .cryptpad-toolbar {
   box-sizing: border-box;
   padding: 0px 6px;
+  background-color: #BBBBFF;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -406,7 +407,8 @@
   position: relative;
 }
 .cryptpad-toolbar-top .cryptpad-title .title,
-.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
+.cryptpad-toolbar-top .cryptpad-title .pencilIcon,
+.cryptpad-toolbar-top .cryptpad-title .saveIcon {
   font-size: 1.5em;
   vertical-align: middle;
   line-height: 32px;
@@ -421,6 +423,22 @@
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
   cursor: pointer;
 }
+.cryptpad-toolbar-top .cryptpad-title .saveIcon {
+  cursor: pointer;
+  border: 1px solid black;
+  border-radius: 0px 2px 2px 0px;
+  background: white;
+  padding: 5px;
+  display: inline;
+  margin-left: -1px;
+  border-collapse: collapse;
+}
+.cryptpad-toolbar-top .cryptpad-title .saveIcon:hover {
+  color: #999;
+}
+.cryptpad-toolbar-top .cryptpad-title .saveIcon span {
+  cursor: pointer;
+}
 .cryptpad-toolbar-top .cryptpad-title:not(input):hover .editable {
   border: 1px solid #888;
   border-radius: 2px 0px 0px 2px;
@@ -485,6 +503,7 @@
   vertical-align: baseline;
 }
 .cryptpad-toolbar-leftside {
+  height: 32px;
   float: left;
   margin-bottom: -1px;
 }
@@ -500,6 +519,7 @@
   margin-top: -1px;
 }
 .cryptpad-toolbar-rightside {
+  height: 32px;
   text-align: right;
 }
 .cryptpad-toolbar-history {

customize.dist/translations/messages.fr.js

@@ -97,6 +97,7 @@ define(function () {
     out.user_accountName = "Nom d'utilisateur";
 
     out.clickToEdit = 'Cliquer pour modifier';
+    out.saveTitle = "Enregistrer le titre (Entrée)";
 
     out.forgetButtonTitle = 'Déplacer ce pad vers la corbeille';
     out.forgetPrompt = 'Cliquer sur OK déplacera ce pad vers la corbeille de votre CryptDrive, êtes-vous sûr ?';

customize.dist/translations/messages.js

@@ -99,6 +99,7 @@ define(function () {
     out.user_accountName = "Account name";
 
     out.clickToEdit = "Click to edit";
+    out.saveTitle = "Save the title (enter)";
 
     out.forgetButtonTitle = 'Move this pad to the trash';
     out.forgetPrompt = 'Clicking OK will move this pad to your trash. Are you sure?';

www/common/toolbar2.js

@@ -392,7 +392,6 @@ define([
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
-        // TODO: move these functions to toolbar or common?
         if (typeof config.title !== "object") {
             console.error("config.title", config);
             throw new Error("config.title is not an object");
@@ -409,6 +408,10 @@ define([
             'class': 'pencilIcon',
             'title': Messages.clickToEdit
         });
+        var $saveIcon = $('<span>', {
+            'class': 'saveIcon',
+            'title': Messages.saveTitle
+        }).hide();
         if (config.readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
         var $input = $('<input>', {
             type: 'text',
@@ -422,6 +425,11 @@ define([
                 style: 'font-family: FontAwesome;'
             });
             $pencilIcon.append($icon).appendTo($titleContainer);
+            var $icon2 = $('<span>', {
+                'class': 'fa fa-check readonly',
+                style: 'font-family: FontAwesome;'
+            });
+            $saveIcon.append($icon2).appendTo($titleContainer);
         }
 
         // Events
@@ -432,26 +440,34 @@ define([
             e.stopPropagation();
             return true;
         });
+        var save = function () {
+            var name = $input.val().trim();
+            if (name === "") {
+                name = $input.attr('placeholder');
+            }
+            Cryptpad.renamePad(name, function (err, newtitle) {
+                if (err) { return; }
+                $text.text(newtitle);
+                callback(null, newtitle);
+                $input.hide();
+                $text.show();
+                $pencilIcon.show();
+                $saveIcon.hide();
+                //$pencilIcon.css('display', '');
+            });
+        };
         $input.on('keyup', function (e) {
             if (e.which === 13 && toolbar.connected === true) {
-                var name = $input.val().trim();
+                save();
-                if (name === "") {
-                    name = $input.attr('placeholder');
-                }
-                Cryptpad.renamePad(name, function (err, newtitle) {
-                    if (err) { return; }
-                    $text.text(newtitle);
-                    callback(null, newtitle);
-                    $input.hide();
-                    $text.show();
-                    //$pencilIcon.css('display', '');
-                });
             } else if (e.which === 27) {
                 $input.hide();
                 $text.show();
+                $pencilIcon.show();
+                $saveIcon.hide();
                 //$pencilIcon.css('display', '');
             }
         });
+        $saveIcon.click(save);
 
         var displayInput = function () {
             if (toolbar.connected === false) { return; }
@@ -461,6 +477,8 @@ define([
             $input.val(inputVal);
             $input.show();
             $input.focus();
+            $pencilIcon.hide();
+            $saveIcon.show();
         };
         $text.on('click', displayInput);
         $pencilIcon.on('click', displayInput);
@@ -482,16 +500,16 @@ define([
             title: Messages.header_logoTitle,
             'class': "cryptpad-logo"
         }).append($imgTag);
-        var $span = $('<span>').text('CryptPad');
+        var $span = $('<span>').text('CryptDrive');
         var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
         $aTagSmall.addClass('narrow');
         var onClick = function (e) {
             e.preventDefault();
             if (e.ctrlKey) {
-                window.open('/');
+                window.open('/drive');
                 return;
             }
-            window.location = "/";
+            window.location = "/drive";
         };
 
         var onContext = function (e) { e.stopPropagation(); };

www/file/file.css

@@ -3,8 +3,10 @@ body {
   margin: 0px;
   height: 100%;
 }
+#toolbar {
+  display: flex;
+}
 .cryptpad-toolbar {
-  margin-bottom: 1px;
   padding: 0px;
   display: inline-block;
 }

www/file/file.less

@@ -7,8 +7,12 @@ html, body {
     margin: 0px;
     height: 100%;
 }
+
+#toolbar {
+    display: flex; // We need this to remove a 3px border at the bottom of the toolbar
+}
+
 .cryptpad-toolbar {
-    margin-bottom: 1px;
     padding: 0px;
     display: inline-block;
 }

www/pad/inner.html

@@ -12,15 +12,19 @@
     }
     #cke_1_top {
         overflow: visible;
-        padding: 0 6px;
+        padding: 0px;
     }
     #cke_1_toolbox {
         display: inline-block;
         width: 100%;
+        background-color: lightgoldenrodyellow;
+    }
+    #cke_1_toolbox .cke_toolbar {
+        height: 28px;
+        padding: 2px 0;
     }
     #cke_1_top .cryptpad-toolbar {
-        margin-bottom: 1px;
+        padding: 0 6px;
-        padding: 0px;
         display: inline-block;
     }
     </style>

www/pad/themes/moono-lisa/dev/locations.json

@@ -0,0 +1,145 @@
+{
+	"0": [
+		[
+			"plugins/sourcearea/icons/source.png",
+			"plugins/sourcedialog/icons/sourcedialog.png"
+		],
+		[
+			"plugins/sourcearea/icons/source-rtl.png",
+			"plugins/sourcedialog/icons/sourcedialog-rtl.png"
+		],
+		"plugins/save/icons/save.png",
+		"plugins/newpage/icons/newpage.png",
+		"plugins/newpage/icons/newpage-rtl.png",
+		"plugins/preview/icons/preview.png",
+		"plugins/preview/icons/preview-rtl.png",
+		"plugins/print/icons/print.png",
+		[
+			"plugins/templates/icons/templates.png",
+			"plugins/templates/icons/templates-rtl.png"
+		],
+		"plugins/docprops/icons/docprops.png",
+		"plugins/docprops/icons/docprops-rtl.png"
+	],
+	"1": [
+		[
+			"plugins/clipboard/icons/cut-rtl.png",
+			"plugins/clipboard/icons/cut.png"
+		],
+		[
+			"plugins/clipboard/icons/copy.png",
+			"plugins/clipboard/icons/copy-rtl.png"
+		],
+		[
+			"plugins/clipboard/icons/paste.png",
+			"plugins/clipboard/icons/paste-rtl.png"
+		],
+		"plugins/pastetext/icons/pastetext.png",
+		"plugins/pastetext/icons/pastetext-rtl.png",
+		"plugins/pastefromword/icons/pastefromword.png",
+		"plugins/pastefromword/icons/pastefromword-rtl.png",
+		"plugins/undo/icons/undo.png",
+		"plugins/undo/icons/undo-rtl.png",
+		"plugins/undo/icons/redo.png",
+		"plugins/undo/icons/redo-rtl.png"
+	],
+	"2": [
+		[
+			"plugins/find/icons/find-rtl.png",
+			"plugins/find/icons/find.png"
+		],
+		"plugins/find/icons/replace.png",
+		"plugins/selectall/icons/selectall.png",
+		[
+			"plugins/wsc/icons/spellchecker.png",
+			"plugins/scayt/icons/scayt.png"
+		]
+	],
+	"3": [
+		"plugins/forms/icons/form.png",
+		"plugins/forms/icons/checkbox.png",
+		"plugins/forms/icons/radio.png",
+		[
+			"plugins/forms/icons/textfield-rtl.png",
+			"plugins/forms/icons/textfield.png"
+		],
+		"plugins/forms/icons/textarea.png",
+		"plugins/forms/icons/textarea-rtl.png",
+		"plugins/forms/icons/select.png",
+		"plugins/forms/icons/select-rtl.png",
+		"plugins/forms/icons/button.png",
+		"plugins/forms/icons/imagebutton.png",
+		"plugins/forms/icons/hiddenfield.png"
+	],
+	"4": [
+		"plugins/basicstyles/icons/bold.png",
+		"plugins/basicstyles/icons/italic.png",
+		"plugins/basicstyles/icons/underline.png",
+		"plugins/basicstyles/icons/strike.png",
+		"plugins/basicstyles/icons/superscript.png",
+		"plugins/basicstyles/icons/subscript.png",
+		"plugins/removeformat/icons/removeformat.png"
+	],
+	"5": [
+		"plugins/list/icons/numberedlist.png",
+		"plugins/list/icons/numberedlist-rtl.png",
+		"plugins/list/icons/bulletedlist.png",
+		"plugins/list/icons/bulletedlist-rtl.png",
+		"plugins/indent/icons/outdent.png",
+		"plugins/indent/icons/indent.png",
+		"plugins/indent/icons/indent-rtl.png",
+		"plugins/indent/icons/outdent-rtl.png",
+		"plugins/blockquote/icons/blockquote.png",
+		"plugins/div/icons/creatediv.png",
+		"plugins/justify/icons/justifyleft.png",
+		"plugins/justify/icons/justifycenter.png",
+		"plugins/justify/icons/justifyright.png",
+		"plugins/justify/icons/justifyblock.png",
+		"plugins/bidi/icons/bidiltr.png",
+		"plugins/bidi/icons/bidirtl.png"
+	],
+	"6": [
+		"plugins/link/icons/link.png",
+		"plugins/link/icons/unlink.png",
+		"plugins/link/icons/anchor.png",
+		"plugins/link/icons/anchor-rtl.png",
+		"plugins/copyformatting/icons/copyformatting.png"
+	],
+	"7": [
+		[
+			"plugins/image/icons/image.png",
+			"plugins/image2/icons/image.png"
+		],
+		"plugins/flash/icons/flash.png",
+		"plugins/table/icons/table.png",
+		"plugins/horizontalrule/icons/horizontalrule.png",
+		"plugins/smiley/icons/smiley.png",
+		"plugins/specialchar/icons/specialchar.png",
+		"plugins/pagebreak/icons/pagebreak.png",
+		"plugins/pagebreak/icons/pagebreak-rtl.png",
+		"plugins/iframe/icons/iframe.png"
+	],
+	"8": [
+		"plugins/colorbutton/icons/textcolor.png",
+		"plugins/colorbutton/icons/bgcolor.png"
+	],
+	"9": [
+		"plugins/maximize/icons/maximize.png",
+		"plugins/showblocks/icons/showblocks.png",
+		"plugins/showblocks/icons/showblocks-rtl.png"
+	],
+	"10": [
+		"plugins/about/icons/about.png",
+		"plugins/uicolor/icons/uicolor.png",
+		"plugins/placeholder/icons/placeholder.png",
+		"plugins/language/icons/language.png",
+		"plugins/codesnippet/icons/codesnippet.png"
+	],
+	"11": [
+		"plugins/link/images/anchor.png",
+		"skins/moono-lisa/images/close.png",
+		"skins/moono-lisa/images/lock.png",
+		"skins/moono-lisa/images/lock-open.png",
+		"skins/moono-lisa/images/refresh.png"
+	]
+}

www/pad/themes/moono-lisa/readme.md

@@ -0,0 +1,46 @@
+"Moono-lisa" Skin
+=================
+
+This skin has been made a **default skin** starting from CKEditor 4.6.0 and is maintained by the core developers.
+
+For more information about skins, please check the [CKEditor Skin SDK](http://docs.cksource.com/CKEditor_4.x/Skin_SDK)
+documentation.
+
+Features
+-------------------
+"Moono-lisa" is a monochromatic skin, which offers a modern, flat and minimalistic look which blends very well in modern design.
+It comes with the following features:
+
+- Chameleon feature with brightness.
+- High-contrast compatibility.
+- Graphics source provided in SVG.
+
+Directory Structure
+-------------------
+
+CSS parts:
+- **editor.css**: the main CSS file. It's simply loading several other files, for easier maintenance,
+- **mainui.css**: the file contains styles of entire editor outline structures,
+- **toolbar.css**: the file contains styles of the editor toolbar space (top),
+- **richcombo.css**: the file contains styles of the rich combo ui elements on toolbar,
+- **panel.css**: the file contains styles of the rich combo drop-down, it's not loaded
+until the first panel open up,
+- **elementspath.css**: the file contains styles of the editor elements path bar (bottom),
+- **menu.css**: the file contains styles of all editor menus including context menu and button drop-down,
+it's not loaded until the first menu open up,
+- **dialog.css**: the CSS files for the dialog UI, it's not loaded until the first dialog open,
+- **reset.css**: the file defines the basis of style resets among all editor UI spaces,
+- **preset.css**: the file defines the default styles of some UI elements reflecting the skin preference,
+- **editor_XYZ.css** and **dialog_XYZ.css**: browser specific CSS hacks.
+
+Other parts:
+- **skin.js**: the only JavaScript part of the skin that registers the skin, its browser specific files and its icons and defines the Chameleon feature,
+- **images/**: contains a fill general used images,
+- **dev/**: contains SVG and PNG source of the skin icons.
+
+License
+-------
+
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+
+For licensing, see LICENSE.md or [http://ckeditor.com/license](http://ckeditor.com/license)

www/pad/themes/moono-lisa/skin.js

@@ -0,0 +1,7 @@
+/*
+ Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.skin.name="moono-lisa";CKEDITOR.skin.ua_editor="ie,iequirks,ie8,gecko";CKEDITOR.skin.ua_dialog="ie,iequirks,ie8";
+CKEDITOR.skin.chameleon=function(){var b=function(){return function(b,d){for(var a=b.match(/[^#]./g),e=0;3>e;e++){var f=e,c;c=parseInt(a[e],16);c=("0"+(0>d?0|c*(1+d):0|c+(255-c)*d).toString(16)).slice(-2);a[f]=c}return"#"+a.join("")}}(),f={editor:new CKEDITOR.template("{id}.cke_chrome [border-color:{defaultBorder};] {id} .cke_top [ background-color:{defaultBackground};border-bottom-color:{defaultBorder};] {id} .cke_bottom [background-color:{defaultBackground};border-top-color:{defaultBorder};] {id} .cke_resizer [border-right-color:{ckeResizer}] {id} .cke_dialog_title [background-color:{defaultBackground};border-bottom-color:{defaultBorder};] {id} .cke_dialog_footer [background-color:{defaultBackground};outline-color:{defaultBorder};] {id} .cke_dialog_tab [background-color:{dialogTab};border-color:{defaultBorder};] {id} .cke_dialog_tab:hover [background-color:{lightBackground};] {id} .cke_dialog_contents [border-top-color:{defaultBorder};] {id} .cke_dialog_tab_selected, {id} .cke_dialog_tab_selected:hover [background:{dialogTabSelected};border-bottom-color:{dialogTabSelectedBorder};] {id} .cke_dialog_body [background:{dialogBody};border-color:{defaultBorder};] {id} a.cke_button_off:hover,{id} a.cke_button_off:focus,{id} a.cke_button_off:active [background-color:{darkBackground};border-color:{toolbarElementsBorder};] {id} .cke_button_on [background-color:{ckeButtonOn};border-color:{toolbarElementsBorder};] {id} .cke_toolbar_separator,{id} .cke_toolgroup a.cke_button:last-child:after,{id} .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after [background-color: {toolbarElementsBorder};border-color: {toolbarElementsBorder};] {id} a.cke_combo_button:hover,{id} a.cke_combo_button:focus,{id} .cke_combo_on a.cke_combo_button [border-color:{toolbarElementsBorder};background-color:{darkBackground};] {id} .cke_combo:after [border-color:{toolbarElementsBorder};] {id} .cke_path_item [color:{elementsPathColor};] {id} a.cke_path_item:hover,{id} a.cke_path_item:focus,{id} a.cke_path_item:active [background-color:{darkBackground};] {id}.cke_panel [border-color:{defaultBorder};] "),panel:new CKEDITOR.template(".cke_panel_grouptitle [background-color:{lightBackground};border-color:{defaultBorder};] .cke_menubutton_icon [background-color:{menubuttonIcon};] .cke_menubutton:hover,.cke_menubutton:focus,.cke_menubutton:active [background-color:{menubuttonHover};] .cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [background-color:{menubuttonIconHover};] .cke_menubutton_disabled:hover .cke_menubutton_icon,.cke_menubutton_disabled:focus .cke_menubutton_icon,.cke_menubutton_disabled:active .cke_menubutton_icon [background-color:{menubuttonIcon};] .cke_menuseparator [background-color:{menubuttonIcon};] a:hover.cke_colorbox, a:active.cke_colorbox [border-color:{defaultBorder};] a:hover.cke_colorauto, a:hover.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore [background-color:{ckeColorauto};border-color:{defaultBorder};] ")};
+return function(g,d){var a=b(g.uiColor,.4),a={id:"."+g.id,defaultBorder:b(a,-.2),toolbarElementsBorder:b(a,-.25),defaultBackground:a,lightBackground:b(a,.8),darkBackground:b(a,-.15),ckeButtonOn:b(a,.4),ckeResizer:b(a,-.4),ckeColorauto:b(a,.8),dialogBody:b(a,.7),dialogTab:b(a,.65),dialogTabSelected:"#FFF",dialogTabSelectedBorder:"#FFF",elementsPathColor:b(a,-.6),menubuttonHover:b(a,.1),menubuttonIcon:b(a,.5),menubuttonIconHover:b(a,.3)};return f[d].output(a).replace(/\[/g,"{").replace(/\]/g,"}")}}();