diff --git a/customize.dist/DecorateToolbar.js b/customize.dist/DecorateToolbar.js index b0d5e967b..49a30c79f 100644 --- a/customize.dist/DecorateToolbar.js +++ b/customize.dist/DecorateToolbar.js @@ -10,7 +10,7 @@ define([ var main = function () { var url = window.location.pathname; var isHtml = /\.html/.test(url) || url === '/' || url === ''; - var isPoll = /\/poll\//.test(url) || /\/file\//.test(url); + var isPoll = /\/poll\//.test(url); if (!isHtml && !isPoll) { Messages._applyTranslation(); return; diff --git a/customize.dist/main.css b/customize.dist/main.css index 1d3e3c347..e60adb50f 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -1,3 +1,204 @@ +.alertify-logs > * { + padding: 12px 48px; + color: #fafafa; + font-weight: bold; + font-size: large; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); + border-radius: 1px; +} +.alertify-logs > *, +.alertify-logs > *.default { + background: rgba(0, 0, 0, 0.8); +} +.alertify-logs > *.error { + background: #FF0073; +} +.alertify-logs > *.success { + background: #46E981; + color: #302B28; +} +.alertify { + position: fixed; + background-color: rgba(0, 0, 0, 0.3); + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 99999; +} +.alertify.hide { + opacity: 0; + pointer-events: none; +} +.alertify, +.alertify.show { + box-sizing: border-box; + transition: all 0.33s cubic-bezier(0.25, 0.8, 0.25, 1); +} +.alertify, +.alertify * { + box-sizing: border-box; +} +.alertify .dialog { + padding: 12px; +} +.alertify .dialog, +.alertify .alert { + width: 100%; + margin: 0 auto; + position: relative; + top: 50%; + transform: translateY(-50%); +} +.alertify .dialog > div, +.alertify .alert > div { + background-color: #685d56; + border-radius: 5px; +} +.alertify .dialog > *, +.alertify .alert > * { + width: 400px; + max-width: 95%; + margin: 0 auto; + text-align: center; + padding: 12px; + background: #fff; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084); +} +.alertify .dialog .msg, +.alertify .alert .msg { + padding: 12px; + margin-bottom: 12px; + margin: 0; + text-align: left; +} +.alertify .dialog input:not(.form-control), +.alertify .alert input:not(.form-control) { + background-color: #302B28; + color: #fafafa; + border: 0px; + border-radius: 5px; + margin-bottom: 15px; + width: 100%; + font-size: 100%; + padding: 12px; +} +.alertify .dialog nav, +.alertify .alert nav { + text-align: right; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button), +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { + background-color: transparent; + box-sizing: border-box; + position: relative; + outline: 0; + border: 0; + display: inline-block; + align-items: center; + padding: 0 6px; + margin: 6px 8px; + line-height: 36px; + min-height: 36px; + white-space: nowrap; + min-width: 88px; + text-align: center; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + cursor: pointer; + color: #fafafa; + border: 1px solid #302B28; + border-radius: 5px; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active { + background-color: rgba(0, 0, 0, 0.15); +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus { + border: 1px dotted #302B28; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner { + border: 0; +} +.alertify .dialog nav button.btn, +.alertify .alert nav button.btn { + margin: 6px 4px; +} +.alertify-logs { + position: fixed; + z-index: 99999; +} +.alertify-logs.bottom, +.alertify-logs:not(.top) { + bottom: 16px; +} +.alertify-logs.left, +.alertify-logs:not(.right) { + left: 16px; +} +.alertify-logs.left > *, +.alertify-logs:not(.right) > * { + float: left; + transform: translate3d(0, 0, 0); + height: auto; +} +.alertify-logs.left > *.show, +.alertify-logs:not(.right) > *.show { + left: 0; +} +.alertify-logs.left > *, +.alertify-logs:not(.right) > *, +.alertify-logs.left > *.hide, +.alertify-logs:not(.right) > *.hide { + left: -110%; +} +.alertify-logs.right { + right: 16px; +} +.alertify-logs.right > * { + float: right; + transform: translate3d(0, 0, 0); +} +.alertify-logs.right > *.show { + right: 0; + opacity: 1; +} +.alertify-logs.right > *, +.alertify-logs.right > *.hide { + right: -110%; + opacity: 0; +} +.alertify-logs.top { + top: 0; +} +.alertify-logs > * { + box-sizing: border-box; + transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + position: relative; + clear: both; + backface-visibility: hidden; + perspective: 1000; + max-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + opacity: 0; + pointer-events: none; +} +.alertify-logs > *.show { + margin-top: 12px; + opacity: 1; + max-height: 1000px; + padding: 12px; + pointer-events: auto; +} a.github-corner > svg { fill: #46E981; color: #302B28; diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index 494e7c369..1900fead5 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -1,4 +1,5 @@ @import "./variables.less"; +@import "./alertify.less"; .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ @font-face{ diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index c420bdae1..02310285b 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -9,8 +9,21 @@ user-select: none; } +.toolbar-container { + .cryptpad-lag { + position: relative; + top: -2px; + } + font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; + background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#f5f5f5, #DDDDDD); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */ +} + .cryptpad-toolbar { box-sizing: border-box; + padding: 0px 6px; .unselectable; @@ -75,6 +88,7 @@ .cryptpad-state { line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ + float: left; } .rightside-button { @@ -120,9 +134,11 @@ line-height: 32px; } .pencilIcon { - display: none; + //display: none; + margin-left: 11px; &:hover { color: #999; + margin-left: 0px; } span { cursor: pointer; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 02eeff7e7..d5f8bbf57 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -6,8 +6,24 @@ -ms-user-select: none; user-select: none; } +.toolbar-container { + font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif; + background: -webkit-linear-gradient(#EEEEEE, #DADADA); + /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#f5f5f5, #DDDDDD); + /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#f5f5f5, #DDDDDD); + /* For Firefox 3.6 to 15 */ + background: linear-gradient(#f5f5f5, #DDDDDD); + /* Standard syntax */ +} +.toolbar-container .cryptpad-lag { + position: relative; + top: -2px; +} .cryptpad-toolbar { box-sizing: border-box; + padding: 0px 6px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -78,6 +94,7 @@ .cryptpad-toolbar .cryptpad-state { line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ + float: left; } .cryptpad-toolbar .rightside-button { float: right; @@ -120,10 +137,11 @@ line-height: 32px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon { - display: none; + margin-left: 11px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover { color: #999; + margin-left: 0px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon span { cursor: pointer; diff --git a/www/code/inner.html b/www/code/inner.html index ff887e387..d10b7c8c3 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -47,19 +47,6 @@ .CodeMirror { height: 100%; } - .cryptpad-toolbar { - padding: 0px 6px; - } - #cme_toolbox div.cryptpad-lag { - line-height: 24px; - } - #cme_toolbox { - font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; - background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */ - background: linear-gradient(white, #DDDDDD); /* Standard syntax */ - } .CodeMirror-focused .cm-matchhighlight { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-position: bottom; @@ -68,7 +55,7 @@ -
+
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index fdc212cec..0f0f14e8f 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -105,7 +105,7 @@ define([ }); // var isArray = function (o) { return Object.prototype.toString.call(o) === '[object Array]'; }; - var isArray = $.isArray; + var isArray = common.isArray = $.isArray; var fixHTML = common.fixHTML = function (html) { return html.replace(/', { - rel: 'stylesheet', - id: 'alertifyCSS', - href: href, - })); - }; + // TODO: remove styleAlerts in all the apps + var styleAlerts = common.styleAlerts = function () {}; var findCancelButton = common.findCancelButton = function () { return $('button.cancel'); @@ -933,7 +920,6 @@ define([ }; common.alert = function (msg, cb) { - common.styleAlerts(); cb = cb || function () {}; var keyHandler = listenForKeys(function (e) { // yes findOKButton().click(); @@ -945,7 +931,6 @@ define([ }; common.prompt = function (msg, def, cb, opt) { - common.styleAlerts(); opt = opt || {}; cb = cb || function () {}; @@ -969,7 +954,6 @@ define([ }; common.confirm = function (msg, cb, opt) { - common.styleAlerts(); opt = opt || {}; cb = cb || function () {}; var keyHandler = listenForKeys(function (e) { diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 861d8fdad..c421a31d0 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -56,7 +56,6 @@ define([ var styleToolbar = function ($container, href) { href = href || '/customize/toolbar.css'; - $.ajax({ url: href, dataType: 'text', @@ -163,11 +162,10 @@ define([ }; var createUserList = function ($container, readOnly) { - var $state = $('', {'class': STATE_CLS}).text(Messages.synchronizing); var $userlist = $('
', { 'class': USER_LIST_CLS, id: uid(), - }).append($state); + }); createUserButtons($userlist, readOnly); $container.append($userlist); return $userlist[0]; @@ -199,14 +197,17 @@ define([ if (n === 1) { return '; + ' + Messages.oneViewer; } return '; + ' + Messages._getKey('viewers', [n]); }; - var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) { + + var checkSynchronizing = function (userList, myUserName, $stateElement) { var meIdx = userList.indexOf(myUserName); if (meIdx === -1) { - console.log('nok'); $stateElement.text(Messages.synchronizing); return; } $stateElement.text(''); + }; + + var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) { // Make sure the elements are displayed var $userButtons = $(userlistElement).find("#userButtons"); $userButtons.attr('display', 'inline'); @@ -283,11 +284,11 @@ define([ }; var createLagElement = function ($container) { - var $lag = $('
', { + var $lag = $('', { 'class': LAG_ELEM_CLS, id: uid(), }); - $container.before($lag); + $container.prepend($lag); return $lag[0]; }; @@ -332,8 +333,7 @@ define([ }).appendTo($topContainer); var $imgTag = $('', { src: "/customize/cryptofist_mini.png", - alt: "Cryptpad", - 'class': "cryptofist" + alt: "Cryptpad" }); // We need to override the "a" tag action here because it is inside the iframe! @@ -361,6 +361,10 @@ define([ 'class': USER_CLS }).appendTo($topContainer); + var $state = $('', { + 'class': STATE_CLS + }).text(Messages.synchronizing).appendTo($userContainer); + var $span = $('' , { 'class': 'cryptpad-language' }); @@ -388,21 +392,24 @@ define([ }; var createTitle = function ($container, readOnly, config, Cryptpad) { - config = config || {}; + var $titleContainer = $('', { + id: 'toolbarTitle', + 'class': TITLE_CLS + }).appendTo($container); + + if (!config || typeof config !== "object") { return; } + var callback = config.onRename; var placeholder = config.defaultName; var suggestName = config.suggestName; // Buttons - var $titleContainer = $('', { - id: 'toolbarTitle', - 'class': TITLE_CLS - }).appendTo($container); var $text = $('', { 'class': 'title' }).appendTo($titleContainer); var $pencilIcon = $('', { - 'class': 'pencilIcon' + 'class': 'pencilIcon', + 'title': Messages.clickToEdit }); if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; } var $input = $('', { @@ -439,19 +446,19 @@ define([ callback(null, newtitle); $input.hide(); $text.show(); - $pencilIcon.css('display', ''); + //$pencilIcon.css('display', ''); }); } else if (e.which === 27) { $input.hide(); $text.show(); - $pencilIcon.css('display', ''); + //$pencilIcon.css('display', ''); } }); var displayInput = function () { $text.hide(); - $pencilIcon.css('display', 'none'); + //$pencilIcon.css('display', 'none'); var inputVal = suggestName() || ""; $input.val(inputVal); $input.show(); @@ -468,17 +475,17 @@ define([ var Cryptpad = config.common; var toolbar = createRealtimeToolbar($container); - var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly); - var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS)); - var lagElement = createLagElement($(userListElement)); + var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined; var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS)); + var lagElement = createLagElement($userAdminElement); + var spinner = createSpinner($userAdminElement); var userData = config.userData; // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode) var saveElement; var loadElement; - var $stateElement = $(userListElement).find('.' + STATE_CLS); + var $stateElement = $userAdminElement.find('.' + STATE_CLS); var connected = false; @@ -490,7 +497,7 @@ define([ $container.find('.cryptpad-dropdown').hide(); }; var cancelEditTitle = function (e) { - if ($(e.target).parents('.' + TITLE_CLS).length) { + if ($(e.target).parents('.' + TITLE_CLS).length || !$titleElement) { return; } $titleElement.find('input').hide(); @@ -508,15 +515,25 @@ define([ } // Update user list - userList.change.push(function (newUserData) { - var users = userList.users; - if (users.indexOf(myUserName) !== -1) { connected = true; } - if (!connected) { return; } - /*if (newUserData) { // Someone has changed his name/color - userData = newUserData; - }*/ - updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement, $userAdminElement); - }); + if (config.userData) { + userList.change.push(function (newUserData) { + var users = userList.users; + if (users.indexOf(myUserName) !== -1) { connected = true; } + if (!connected) { return; } + /*if (newUserData) { // Someone has changed his name/color + userData = newUserData; + }*/ + checkSynchronizing(users, myUserName, $stateElement); + updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement); + }); + } else { + userList.change.push(function () { + var users = userList.users; + if (users.indexOf(myUserName) !== -1) { connected = true; } + if (!connected) { return; } + checkSynchronizing(users, myUserName, $stateElement); + }); + } // Display notifications when users are joining/leaving the session var oldUserData; if (typeof Cryptpad !== "undefined") { diff --git a/www/file/file.css b/www/file/file.css index 227cb3735..72caad18e 100644 --- a/www/file/file.css +++ b/www/file/file.css @@ -12,6 +12,14 @@ html, body { } body { + display: flex; + flex-flow: column; +} + +.app-container { + flex: 1; + overflow: auto; + width: 100%; display: flex; flex-flow: row; } diff --git a/www/file/index.html b/www/file/index.html index 997d88c62..fc6c137e2 100644 --- a/www/file/index.html +++ b/www/file/index.html @@ -1,6 +1,7 @@ + CryptFiles -
-
-
-
- - - -