diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index 17e25c232..9832fc0a9 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -105,6 +105,34 @@ } } +.cryptpad-toolbar-top { + display: block; + text-align: center; + .cryptpad-title { + text-align: center; + input { + border: 1px solid black; + background: #fff; + cursor: auto; + width: 300px; + padding: 5px; + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + &:focus { + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + } + } + } +} .cryptpad-toolbar-leftside { float: left; margin-bottom: -1px; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 930a17eaf..9cbde4f5d 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -101,6 +101,34 @@ border: 1px solid #A6A6A6; border-bottom-color: #979797; } +.cryptpad-toolbar-top { + display: block; + text-align: center; +} +.cryptpad-toolbar-top .cryptpad-title { + text-align: center; +} +.cryptpad-toolbar-top .cryptpad-title input { + border: 1px solid black; + background: #fff; + cursor: auto; + width: 300px; + padding: 5px; + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.cryptpad-toolbar-top .cryptpad-title input:focus { + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} .cryptpad-toolbar-leftside { float: left; margin-bottom: -1px; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index b512ab54b..b6d5f1588 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -619,6 +619,32 @@ define([ /* * Buttons */ + var renamePad = common.renamePad = function (title, callback) { + if (title === null) { return; } + + common.causesNamingConflict(title, function (err, conflicts) { + if (err) { + console.log("Unable to determine if name caused a conflict"); + console.error(err); + callback(err, title); + return; + } + + if (conflicts) { + common.alert(Messages.renameConflict); + return; + } + + common.setPadTitle(title, function (err, data) { + if (err) { + console.log("unable to set pad title"); + console.log(err); + return; + } + callback(null, title); + }); + }); + }; var createButton = common.createButton = function (type, rightside, data, callback) { var button; var size = "17px"; @@ -657,33 +683,9 @@ define([ button.click(function() { var suggestion = suggestName(); - common.prompt(Messages.renamePrompt, - suggestion, function (title, ev) { - if (title === null) { return; } - - common.causesNamingConflict(title, function (err, conflicts) { - if (err) { - console.log("Unable to determine if name caused a conflict"); - console.error(err); - callback(err, title); - return; - } - - if (conflicts) { - common.alert(Messages.renameConflict); - return; - } - - common.setPadTitle(title, function (err, data) { - if (err) { - console.log("unable to set pad title"); - console.log(err); - return; - } - callback(null, title); - }); - }); - }); + common.prompt(Messages.renamePrompt, suggestion, function (title, ev) { + renamePad(title, callback); + }); }); } break; diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 943e27df5..bd58f324a 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -17,6 +17,7 @@ define([ /** The toolbar class which contains the user list, debug link and lag. */ var TOOLBAR_CLS = Bar.constants.toolbar = 'cryptpad-toolbar'; + var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top'; var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside'; var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside'; @@ -34,6 +35,7 @@ define([ var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare"; var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container"; var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown"; + var TITLE_CLS = Bar.constants.title = "cryptpad-title"; /** Key in the localStore which indicates realtime activity should be disallowed. */ // TODO remove? will never be used in cryptpad @@ -67,6 +69,7 @@ define([ 'class': TOOLBAR_CLS, id: uid(), }) + .append($('
', {'class': TOP_CLS})) .append($('
', {'class': LEFTSIDE_CLS})) .append($('
', {'class': RIGHTSIDE_CLS})); @@ -300,6 +303,36 @@ define([ $(lagElement).append(lagLight); }; + var createTitle = function ($container, readOnly, cb) { + var $titleContainer = $('', { + id: 'toolbarTitle', + 'class': TITLE_CLS + }).appendTo($container); + var $text = $('').appendTo($titleContainer); + if (readOnly === 1) { return; } + var $input = $('', { + type: 'text' + }).appendTo($titleContainer).hide(); + $input.on('keyup', function (e) { + if (e.which === 13) { + Cryptpad.renamePad(title, function (err, newtitle) { + if (err) { return; } + $text.text(newtitle); + cb(null, newtitle); + $input.hide(); + $text.show(); + }); + } + }); + $text.on('click', function () { + console.log('click'); + $text.hide(); + $input.val($text.text()); + $input.show(); + $input.focus(); + }); + }; + var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) { var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1; @@ -307,6 +340,7 @@ define([ var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly); var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS)); var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS)); + var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.onRename); var userData = config.userData; // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode) var saveElement; diff --git a/www/pad/main.js b/www/pad/main.js index 78b49fc8f..d6f3fdef5 100644 --- a/www/pad/main.js +++ b/www/pad/main.js @@ -85,11 +85,12 @@ define([ }); editor.on('instanceReady', function (Ckeditor) { + var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox'); + if (readOnly) { $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox > .cke_toolbar').hide(); } - /* add a class to the magicline plugin so we can pick it out more easily */ var ml = $('iframe')[0].contentWindow.CKEDITOR.instances.editor1.plugins.magicline @@ -402,6 +403,7 @@ define([ document.title = oldTitle; return; } + $bar.find('.' + Toolbar.constants.title).find('span').text(newTitle); }); }; @@ -512,13 +514,19 @@ define([ realtimeOptions.onLocal(); }; + var renameCb = function (err, title) { + if (err) { return; } + document.title = title; + editor.fire('change'); + }; + var onInit = realtimeOptions.onInit = function (info) { - var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox'); toolbarList = info.userList; var config = { userData: userList, readOnly: readOnly, - ifrw: ifrw + ifrw: ifrw, + onRename: renameCb }; if (readOnly) {delete config.changeNameID; } toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config); @@ -554,11 +562,6 @@ define([ $rightside.append($import); /* add a rename button */ - var renameCb = function (err, title) { - if (err) { return; } - document.title = title; - editor.fire('change'); - }; var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb); $rightside.append($setTitle); } @@ -593,13 +596,8 @@ define([ console.log("Couldn't get pad title"); return; } + updateTitle(title || info.channel.slice(0, 8)); document.title = title || info.channel.slice(0, 8); - Cryptpad.setPadTitle(title, function (err, data) { - if (err) { - console.log("Couldn't remember pad"); - console.error(err); - } - }); }); };