diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less new file mode 100644 index 000000000..85516371a --- /dev/null +++ b/customize.dist/src/less2/include/icons.less @@ -0,0 +1,40 @@ +.icons_main() { + li { + display: inline-block; + margin: 10px 10px; + width: 140px; + height: 140px; + text-align: center; + vertical-align: top; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 5px; + padding-bottom: 5px; + border: 1px solid white; + + .cp-icons-name { + width: 100%; + height: 24px; + margin: 0; + display: inline-block; + font-size: 14px; + //align-items: center; + //justify-content: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-wrap: break-word; + } + .fa { + display: block; + margin: auto; + font-size: 64px; + margin: 18px 0; + text-align: center; + &.listonly { + display: none; + } + } + } +} + diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 9335058b5..178a922fb 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -6,6 +6,8 @@ @import (once) "./toolbar-history.less"; @import (once) "./icon-colors.less"; @import (once) "./tools.less"; +@import (once) "./icons.less"; +@import (once) "./modal.less"; .toolbar_main ( @color: @colortheme_default-color, // Color of the text for the toolbar @@ -173,6 +175,68 @@ } } + #cp-app-toolbar-creation-dialog.cp-modal-container { + .icons_main(); + + li:hover { + border: 1px solid white; + } + .cp-modal { + display: flex; + flex-flow: column; + li, li .fa { + cursor: pointer; + } + &> p { + margin: 50px; + } + &> div { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + overflow-y: auto; + } + } + + .cp-creation-icons-name { + white-space: nowrap; + } + + #cp-app-toolbar-creation-advanced { + width: auto; + margin: 0; + padding: 0; + } + label[for="cp-app-toolbar-creation-advanced"] { + margin: 0; + margin-left: 5px; + } + + @media screen and (max-height: @browser_media-not-big) { + .cp-modal { + & > p { + display: none; + } + & > div { + align-content: unset; + li { + height: 40px; + width: 200px; + display: flex; + align-items: center; + .fa { + font-size: 32px; + } + .cp-icons-name { + height: auto; + } + } + } + } + } + } + // TODO(cjd) This ought to be in a less file for markdown-based editors .cp-markdown-toolbar { height: @toolbar_line-height; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index c79e07708..11839b5b5 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -806,6 +806,9 @@ define(function () { out.creation_noOwner = "Pad de propriétaire"; out.creation_expiration = "Date d'expiration"; out.creation_propertiesTitle = "Disponibilité"; + out.creation_appMenuName = "Mode avancé (Ctrl + E)"; + out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez cocher la case pour afficher l'écran de création de pads"; + out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads"; return out; }); diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 3261f4b3b..a877275fd 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -839,6 +839,9 @@ define(function () { out.creation_noOwner = "No owner"; out.creation_expiration = "Expiration time"; out.creation_propertiesTitle = "Availability"; + out.creation_appMenuName = "Advanced mode (Ctrl + E)"; + out.creation_newPadModalDescription = "Click on a pad type to create it. You can check the box if you want to display the pad creation screen (for owned pad, expiration pad, etc.)."; + out.creation_newPadModalAdvanced = "Display the pad creation screen"; return out; }); diff --git a/www/common/common-constants.js b/www/common/common-constants.js index 044319069..494267ed3 100644 --- a/www/common/common-constants.js +++ b/www/common/common-constants.js @@ -11,5 +11,6 @@ define(function () { oldStorageKey: 'CryptPad_RECENTPADS', storageKey: 'filesData', tokenKey: 'loginToken', + displayPadCreationScreen: 'displayPadCreationScreen' }; }); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index ebb401b1c..938866411 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -5,6 +5,7 @@ define([ '/common/common-hash.js', '/common/common-language.js', '/common/common-interface.js', + '/common/common-constants.js', '/common/common-feedback.js', '/common/hyperscript.js', '/common/media-tag.js', @@ -13,8 +14,8 @@ define([ '/bower_components/nthen/index.js', 'css!/common/tippy.css', -], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages, AppConfig, - NThen) { +], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Messages, + AppConfig, NThen) { var UIElements = {}; // Configure MediaTags to use our local viewer @@ -1262,6 +1263,64 @@ define([ return $blockContainer; }; + UIElements.createNewPadModal = function (common) { + var $modal = UIElements.createModal({ + id: 'cp-app-toolbar-creation-dialog', + $body: $('body') + }); + var $title = $('
').text(Messages.creation_newPadModalDescription); + $modal.find('.cp-modal').append($title); + $modal.find('.cp-modal').append($description); + + var $advanced; + + var $advancedContainer = $('