diff --git a/bower.json b/bower.json index 7bf775e64..f9ee60c20 100644 --- a/bower.json +++ b/bower.json @@ -38,7 +38,7 @@ "scrypt-async": "1.2.0", "require-css": "0.1.10", "less": "^2.7.2", - "bootstrap": "#v4.0.0-alpha.6", + "bootstrap": "^v4.0.0", "diff-dom": "2.1.1", "nthen": "^0.1.5", "open-sans-fontface": "^1.4.2", @@ -49,6 +49,6 @@ "sortablejs": "#^1.6.0" }, "resolutions": { - "bootstrap": "v4.0.0-alpha.6" + "bootstrap": "^v4.0.0" } } diff --git a/customize.dist/login.js b/customize.dist/login.js index fde218d21..1f8cebab5 100644 --- a/customize.dist/login.js +++ b/customize.dist/login.js @@ -75,6 +75,7 @@ define([ logLevel: 1, classic: true, ChainPad: ChainPad, + owners: [opt.edPublic] }; var rt = opt.rt = Listmap.create(config); diff --git a/customize.dist/pages.js b/customize.dist/pages.js index a08e40d3c..5178cac17 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -384,7 +384,8 @@ define([ var item = faq[c][q]; if (typeof item !== "object") { return; } var answer = h('p.cp-faq-questions-a'); - var question = h('p.cp-faq-questions-q'); + var hash = c + '-' + q; + var question = h('p.cp-faq-questions-q#' + hash); $(question).click(function () { if ($(answer).is(':visible')) { return void $(answer).slideUp(); @@ -401,6 +402,10 @@ define([ h('div.cp-faq-category-questions', questions) ])); }); + var hash = window.location.hash; + if (hash) { + $(categories).find(hash).click(); + } return h('div#cp-main', [ infopageTopbar(), h('div.container.cp-container', [ diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less new file mode 100644 index 000000000..30c6e7d4a --- /dev/null +++ b/customize.dist/src/less2/include/checkmark.less @@ -0,0 +1,67 @@ +@import (once) "./colortheme-all.less"; + +.checkmark_main(@size) { + + @width: round(@size / 8); + @dim1: round(@size / 3); + @dim2: round(2 * @size / 3); + @top: round(@size / 12); + // Text + .cp-checkmark { + margin: 0; + display: flex; + align-items: center; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + &.cp-checkmark-secondary { + .cp-checkmark-mark { + &:after { + border-color: @colortheme_checkmark-col2; + } + } + input { + &:checked ~ .cp-checkmark-mark { + background-color: @colortheme_checkmark-back2; + } + } + } + &:hover .cp-checkmark-mark { + background-color: @colortheme_checkmark-back0-active; + } + + input { + display: none; + &:checked ~ .cp-checkmark-mark { + background-color: @colortheme_checkmark-back1; + &:after { + display: block; + } + } + } + + .cp-checkmark-mark { + margin-right: 10px; + position: relative; + height: @size; + width: @size; + background-color: @colortheme_checkmark-back0; + display: flex; + justify-content: center; + &:after { + content: ""; + display: none; + margin-top: @top; + width: @dim1; + height: @dim2; + transform: rotate(45deg); + border: solid @colortheme_checkmark-col1; + border-width: 0 @width @width 0; + } + } + + } +} diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 1a2b143e5..1bdb69291 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -109,3 +109,10 @@ @cryptpad_color_grey: #999999; @cryptpad_header_col: #1E1F1F; @cryptpad_text_col: #3F4141; + +@colortheme_checkmark-back0: #ffffff; +@colortheme_checkmark-back0-active: #bbbbbb; +@colortheme_checkmark-back1: #FF0073; +@colortheme_checkmark-col1: #ffffff; +@colortheme_checkmark-back2: #FFFFFF; +@colortheme_checkmark-col2: #000000; diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 16bce0637..9b7c865f6 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -1,5 +1,7 @@ @import (once) "./colortheme-all.less"; @import (once) "./tools.less"; +@import (once) "./checkmark.less"; +@import (once) './icon-colors.less'; .creation_main() { .tippy-popper { @@ -31,149 +33,220 @@ max-width: 100%; margin: 40px auto; text-align: left; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - h2 { - width: 100%; - display: flex; - margin-bottom: 20px; - justify-content: space-between; - .cp-creation-help { - display: none; - } - } - .cp-creation-help-container { - width: 100%; - display: flex; - justify-content: space-between; - p { - padding: 0 20px; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 50%; - text-align: justify; - } - } - @media screen and (max-width: 500px) { - width: ~"calc(100% - 30px)"; - } - @media screen and (max-height: 800px), screen and (max-width: 500px) { - h2 .cp-creation-help { - display: inline; - } - .cp-creation-help-container { - display: none; - } - } - @media screen and (min-height: 601px) { - @media screen and (min-width: 501px) { - p { - display: block !important; - } - } - } } .cp-creation-create, .cp-creation-settings { + margin-top: 0px; + @creation-button: #FF0073; button { .tools_unselectable(); padding: 15px; - background: darken(@colortheme_loading-bg, 10%); - color: @colortheme_loading-color; + background: #30b239; + color: #FFF; + font-weight: bold; margin: 3px 10px; border: none; cursor: pointer; outline: none; + width: 100%; &:hover { - background: darken(@colortheme_loading-bg, 5%); - } - &.cp-creation-button-selected { - color: darken(@colortheme_loading-bg, 10%); - background: @colortheme_loading-color; + background: darken(@creation-button, 5%); } } } + .cp-creation-create { + text-align: center; + } - input[type="radio"] { - display: none; - &:checked { - & + label { - font-weight: bold; - background-color: lighten(@colortheme_loading-bg, 20%); - cursor: default; - border: 1px solid #c1158e; + #cp-creation-form { + display: flex; + flex-flow: column; + align-items: center; + & > div { + width: 400px; + max-width: 100%; + display: flex; + align-items: center; + flex-wrap: wrap; + font-size: 16px; + margin: 10px 0; + label { + flex: 1; + } + input[type="checkbox"] { + &+ label { + margin-bottom: 0; + flex: 1; + padding: 0 10px; + } + } + .cp-creation-help { + font-size: 18px; + color: white; &:hover { - background-color: lighten(@colortheme_loading-bg, 20%); + color: #AAA; + text-decoration: none; } } } - } - input[type="radio"] + label { - .tools_unselectable(); - display: inline-flex; - align-items: center; - justify-content: center; - width: 200px; - height: 50px; - padding: 5px; - margin: 0 20px; - border: 1px solid @colortheme_loading-color; - cursor: pointer; - &:hover { - background-color: lighten(@colortheme_loading-bg, 10%); + .cp-creation-slider { + display: block; + overflow: hidden; + max-height: 0px; + transition: max-height 0.5s ease-in-out; + width: 100%; + margin-top: 10px; + &.active { + max-height: 40px; + } } - } - .cp-creation-expire { - #cp-creation-expire-true { - display: none; - &:checked { - & + label { - height: 100px; - .cp-creation-expire-picker { - display: inline; - } + .cp-creation-expire { + .cp-creation-expire-picker { + text-align: center; + input { + width: 100px; } } } - label[for="cp-creation-expire-true"] { - flex-wrap: wrap; - .cp-creation-expire-picker { - display: none; + .cp-creation-settings { + button { + margin: 0; + padding: 0; } - input { - width: 70px; + .cp-filler { flex: 1; } + } + + div.cp-creation-remember { + margin-top: 30px; + .cp-creation-remember-help { + font-style: italic; } - select { - width: 100px; + } + div.cp-creation-template { + width: 100%; + background-color: darken(@colortheme_modal-bg, 3%); + padding: 20px; + margin: 30px 0; + .cp-creation-title { + padding: 0 0 10px 10px; } - input, select { - border: none; - height: 30px; - background: @colortheme_loading-bg; - color: @colortheme_loading-color; - border-radius: 3px; + } + .cp-creation-template-container { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + overflow-y: auto; + align-items: center; + .cp-creation-template-element { + @darker: darken(@colortheme_modal-fg, 30%); + + width: 135px; + padding: 5px; + margin: 5px; + display: inline-flex; + flex-flow: column; + + box-sizing: content-box; + + text-align: left; + line-height: 1em; + cursor: pointer; + + background-color: #111; + color: @darker; + border: 1px solid transparent; + + &.cp-creation-template-selected { + border: 1px solid white; + background-color: #222; + } + + transition: all 0.1s; + + &:hover { + color: @colortheme_modal-fg; + } + + align-items: center; + + img { + max-width: 100px; + max-height: 100px; + background: #fff; + } + + .cp-creation-template-element-name { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 20px; + line-height: 20px; + margin-top: 5px; + max-width: 100%; + } + .fa { + cursor: pointer; + width: 100px; + height: 100px; + font-size: 70px; + text-align: center; + line-height: 100px; + } } } } - .cp-creation-settings { - justify-content: left; - a { - color: #0275d8; - &:hover { - color: lighten(#0275d8, 10%); - } + + .cp-creation-deleted-container { + text-align: center; + .cp-creation-deleted { + background: #111; + padding: 10px; + text-align: center; + font-weight: bold; + display: inline-block; } - &> span.fa { - margin-left: 15px; + } + + .checkmark_main(30px); + + @media screen and (max-width: @browser_media-narrow-screen) { + & > div { + width: 95%; + margin: 10px auto; } } - .cp-creation-deleted { - background: #111; - padding: 10px; - text-align: justify; - font-weight: bold; + @media screen and (max-width: @browser_media-medium-screen) { + #cp-creation-form { + div.cp-creation-template { + margin: 0; + padding: 5px; + .cp-creation-template-container { + .cp-creation-template-element { + flex-flow: row; + margin: 1px; + padding: 5px; + width: 155px; + img { + display: none; + } + .fa { + font-size: 18px; + width: 20px; + height: 20px; + line-height: 20px; + display: inline !important; + } + .cp-creation-template-element-name { + margin: 0; + margin-left: 5px; + } + } + } + } + } } + } } diff --git a/customize.dist/template.js b/customize.dist/template.js index 2aed683ce..9285567ca 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -108,6 +108,8 @@ $(function () { require([ '/customize/main.js', ], function () {}); } else if (/invite/.test(pathname)) { require([ '/invite/main.js'], function () {}); + } else if (/faq/.test(pathname)) { + window.location.hash = window.location.hash; } else { require([ '/customize/main.js', ], function () {}); } diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 9dc0e21db..d195a5202 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -363,7 +363,7 @@ define(function () { out.fm_templateName = "Modèles"; out.fm_searchName = "Recherche"; out.fm_recentPadsName = "Pads récents"; - out.fm_ownedPadsName = "Pads possédés"; + out.fm_ownedPadsName = "Pads en votre possession"; out.fm_searchPlaceholder = "Rechercher..."; out.fm_newButton = "Nouveau"; out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant"; @@ -771,13 +771,13 @@ define(function () { 'Il désigne un document que vous pouvez modifier dans votre navigateur et, en général, vous pouvez voir les modifications effectuées par les autres utilisateurs de manière quasiment instantanée.' }, owned: { - q: "Qu'est-ce qu'un pad possédé ?", - a: "Un pad possédé est un pad créé avec un propriétaire explicite, identifié sur le serveur par sa clé de signature publique.
" + + q: "Qu'est-ce qu'un pad avec propriétaire ?", + a: "Être propriétaire d'un pad signifie que vous êtes identifié comme tel par le serveur avec à votre clé de signature publique.
" + "Le propriétaire d'un pad peut décider de supprimer ce pad du serveur de manière permanente, afin de le rendre inaccessible aux autres collaborateurs même s'ils possédent le lien dans leur CryptDrive." }, expiring: { - q: "Qu'est-ce qu'un pad expirant ?", - a: "Un pad expirant est un pad créé avec une date définie à partir de laquelle il sera supprimé automatiquement du serveur. Les pads expirants peuvent être configurés pour avoir une durée de vie comprise entre une heure et cent mois. Le pad et tout son historique sera alors inaccessible, de manière permanente, même s'il est en cours d'édition à sa date d'expiration.
" + + q: "Qu'est-ce qu'un pad à durée de vie ?", + a: "Un pad à durée de vie est un pad créé avec une date définie à partir de laquelle il sera supprimé automatiquement du serveur. Ils peuvent être configurés pour avoir une durée de vie comprise entre une heure et cent mois. Le pad et tout son historique sera alors inaccessible, de manière permanente, même s'il est en cours d'édition à sa date d'expiration.
" + "Si un pad possède une date d'expiration, vous pouvez la vérifier en regardant les propriétés du pad, soit avec un clic-droit sur le pad dans votre CryptDrive, ou soit en cliquant sur Propriétés dans le sous-menu de la barre d'outils de l'application." }, tag: { @@ -871,9 +871,9 @@ define(function () { }, remove: { q: "J'ai supprimé un pad ou un fichier de mon CryptDrive, mais le contenu est encore disponible. Comment le supprimer ?", - a: "Seuls les pads possédés (introduits en février 2018) peuvent être supprimés du serveur. Ils ne peuvent d'ailleurs être supprimés du serveur que par leur propriétaire (l'utilisateur ayant créé le pad).
" + + a: "Seuls les pads avec propriétaire (introduits en février 2018) peuvent être supprimés du serveur. Ils ne peuvent d'ailleurs être supprimés du serveur que par leur propriétaire (l'utilisateur ayant créé le pad).
" + "Si vous n'êtes pas le créateur du pad, vous devrez demander au propriétaire de le supprimer pour vous.
" + - "Pour les pads que vous possédez, vous pouvez effectuer un clic-droit sur le pad dans votre CryptDrive, et sélectionner Supprimer du serveur." + "Pour les pads dont vous êtes le propriétaire, vous pouvez effectuer un clic-droit sur le pad dans votre CryptDrive, et sélectionner Supprimer du serveur." }, forget: { q: "Que faire si j'oublie mon mot de passe ?", @@ -1062,32 +1062,35 @@ define(function () { // Creation page out.creation_404 = "Ce pad n'existe plus. Vous pouvez créer un nouveau pad en utilisant le formulaire suivant."; out.creation_ownedTitle = "Type de pad"; - out.creation_ownedTrue = "Pad possédé"; - out.creation_ownedFalse = "Pad ouvert"; - out.creation_owned1 = "Un pad possédé peut être supprimé du serveur à tout moment quand son propriétaire le souhaite. Une fois supprimé, il disparaît du CryptDrive des autres utilisateurs."; - out.creation_owned2 = "Un pad ouvert n'a pas de propriétaire et ne peut donc pas être supprimé du serveur à moins d'avoir dépassé sa date d'expiration."; + out.creation_owned = "Être propriétaire de ce pad"; + out.creation_ownedTrue = "Être propriétaire"; + out.creation_ownedFalse = "Pas de propriétaire"; + out.creation_owned1 = "Être propriétaire d'un pad signifie que vous pouvez le supprimer du serveur à tout moment. Une fois supprimé, il disparaît du CryptDrive des autres utilisateurs."; + out.creation_owned2 = "Un pad sans propriétaire ne peut pas être supprimé du serveur à moins d'avoir dépassé son éventuelle date d'expiration."; out.creation_expireTitle = "Durée de vie"; + out.creation_expire = "Ajouter une durée de vie"; out.creation_expireTrue = "Ajouter durée de vie"; out.creation_expireFalse = "Illimité"; out.creation_expireHours = "Heure(s)"; out.creation_expireDays = "Jour(s)"; out.creation_expireMonths = "Mois"; out.creation_expire1 = "Un pad illimité ne sera pas supprimé du serveur à moins que son propriétaire ne le décide."; - out.creation_expire2 = "Un pad expirant a une durée de vie définie, après laquelle il sera supprimé automatiquement du serveur et du CryptDrive des utilisateurs."; - out.creation_createTitle = "Créer un pad"; - out.creation_createFromTemplate = "Depuis un modèle"; - out.creation_createFromScratch = "Nouveau pad vide"; - out.creation_settings = "Préférences des nouveaux pads"; - out.creation_saveSettings = "Sauver les préférences"; + out.creation_expire2 = "Un pad à durée de vie sera supprimé automatiquement du serveur et du CryptDrive des utilisateurs lorsque cette durée sera dépassée."; + out.creation_noTemplate = "Pas de modèle"; + out.creation_newTemplate = "Nouveau modèle"; + out.creation_create = "Créer"; + out.creation_saveSettings = "Ne plus me demander"; + out.creation_settings = "Voir davantage de préférences"; + out.creation_rememberHelp = "Ouvrez votre page de Préférences pour annuler cette fonctionnalité"; // Properties about creation data out.creation_owners = "Propriétaires"; - out.creation_ownedByOther = "Possédé par un autre utilisateur"; + out.creation_ownedByOther = "Appartient à un autre utilisateur"; out.creation_noOwner = "Pas 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 aussi appuyer sur Tab pour sélectionner un type et appuyer sur Entrée pour valider."; - out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads possédés ou à date d'expiration). Vous pouvez appuyer sur Espace pour changer sa valeur."; + out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads avec propriétaire ou à durée de vie). Vous pouvez appuyer sur Espace pour changer sa valeur."; out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads"; // New share modal diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index ac90a1d3b..118334c86 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -1109,11 +1109,13 @@ define(function () { // Creation page out.creation_404 = "This pad not longer exists. Use the following form to create a new pad."; out.creation_ownedTitle = "Type of pad"; - out.creation_ownedTrue = "Owned pad"; + out.creation_owned = "Owned pad"; // Creation page + out.creation_ownedTrue = "Owned pad"; // Settings out.creation_ownedFalse = "Open pad"; out.creation_owned1 = "An owned pad can be deleted from the server whenever the owner wants. Deleting an owned pad removes it from other users' CryptDrives."; out.creation_owned2 = "An open pad doesn't have any owner and thus, it can't be deleted from the server unless it has reached its expiration time."; out.creation_expireTitle = "Life time"; + out.creation_expire = "Expiring pad"; out.creation_expireTrue = "Add a life time"; out.creation_expireFalse = "Unlimited"; out.creation_expireHours = "Hour(s)"; @@ -1121,11 +1123,12 @@ define(function () { out.creation_expireMonths = "Month(s)"; out.creation_expire1 = "An unlimited pad will not be removed from the server until its owner deletes it."; out.creation_expire2 = "An expiring pad has a set lifetime, after which it will be automatically removed from the server and other users' CryptDrives."; - out.creation_createTitle = "Create a pad"; - out.creation_createFromTemplate = "From template"; - out.creation_createFromScratch = "From scratch"; - out.creation_settings = "New Pad settings"; - out.creation_saveSettings = "Save settings"; + out.creation_noTemplate = "No template"; + out.creation_newTemplate = "New template"; + out.creation_create = "Create"; + out.creation_saveSettings = "Don't show this again"; + out.creation_settings = "View more settings"; + out.creation_rememberHelp = "Visit your Settings page to reset this preference"; // Properties about creation data out.creation_owners = "Owners"; out.creation_ownedByOther = "Owned by another user"; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 9517971e7..24c7098c0 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -638,9 +638,10 @@ define([ var $icon = UI.getIcon(); if (!data) { return $icon; } var href = data.href; - if (!href) { return $icon; } + var type = data.type; + if (!href && !type) { return $icon; } - var type = Hash.parsePadUrl(href).type; + if (!type) { type = Hash.parsePadUrl(href).type; } $icon = UI.getIcon(type); return $icon; diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js index f3864e6a3..455b095c9 100644 --- a/www/common/common-thumbnail.js +++ b/www/common/common-thumbnail.js @@ -237,6 +237,9 @@ define([ $span.prepend(img); cb($(img)); }; + Thumb.addThumbnail = function(thumb, $span, cb) { + return addThumbnail(null, thumb, $span, cb); + }; var getKey = function (href) { var parsed = Hash.parsePadUrl(href); return 'thumbnail-' + parsed.type + '-' + parsed.hashData.channel; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 02a929ad1..bffc6e2d5 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -852,7 +852,7 @@ define([ var tbState = true; common.getAttribute(['general', 'markdown-help'], function (e, data) { if (e) { return void console.error(e); } - if ($(window).height() < 800) { return; } + if ($(window).height() < 800 && $(window).width() < 800) { return; } if (data === true && $toolbarButton.length && tbState) { $toolbarButton.click(); } @@ -869,7 +869,7 @@ define([ } common.getAttribute(['general', 'markdown-help'], function (e, data) { if (e) { return void console.error(e); } - if ($(window).height() < 800) { return; } + if ($(window).height() < 800 && $(window).width() < 800) { return; } if (data === true && $toolbarButton) { // Show the toolbar using the button to make sure the icon in the button is // correct (caret-down / caret-up) @@ -964,7 +964,7 @@ define([ }); common.getAttribute(['hideHelp', type], function (err, val) { - if ($(window).height() < 800) { return void toggleHelp(true); } + if ($(window).height() < 800 && $(window).width() < 800) { return void toggleHelp(true); } if (val === true) { toggleHelp(true); } }); @@ -1792,6 +1792,7 @@ define([ UIElements.setExpirationValue = function (val, $expire) { if (val && typeof (val) === "number") { + $expire.find('#cp-creation-expire').attr('checked', true).trigger('change'); $expire.find('#cp-creation-expire-true').attr('checked', true); if (val % (3600 * 24 * 30) === 0) { $expire.find('#cp-creation-expire-unit').val("month"); @@ -1822,22 +1823,24 @@ define([ var $creationContainer = $('
', { id: 'cp-creation-container' }).appendTo($body); var $creation = $('
', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer); - var setHTML = function (e, html) { - e.innerHTML = html; - return e; - }; - // Title - $creation.append(h('h1.cp-creation-title', Messages['button_new'+type])); + var colorClass = 'cp-icon-color-'+type; + $creation.append(h('h2.cp-creation-title', Messages.newButtonTitle)); + //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle)); // Deleted pad warning if (metadataMgr.getPrivateData().isDeleted) { - $creation.append(h('div.cp-creation-deleted', Messages.creation_404)); + $creation.append(h('div.cp-creation-deleted-container', + h('div.cp-creation-deleted', Messages.creation_404) + )); } - var createHelper = function (text) { - var q = h('span.cp-creation-help.fa.fa-question', { - title: text + var origin = common.getMetadataMgr().getPrivateData().origin; + var createHelper = function (href, text) { + var q = h('a.cp-creation-help.fa.fa-question', { + title: text, + href: origin + href, + target: "_blank" }); return q; }; @@ -1845,78 +1848,159 @@ define([ // Owned pads // Default is Owned pad var owned = h('div.cp-creation-owned', [ - h('h2', [ - Messages.creation_ownedTitle, - createHelper(Messages.creation_owned1 + '\n' + Messages.creation_owned2) + h('label.cp-checkmark', [ + h('input', { + type: 'checkbox', + id: 'cp-creation-owned', + checked: 'checked' + }), + h('span.cp-checkmark-mark'), + Messages.creation_owned ]), - h('div.cp-creation-help-container', [ - setHTML(h('p'), Messages.creation_owned1), - setHTML(h('p'), Messages.creation_owned2) - ]), - h('input#cp-creation-owned-true.cp-creation-owned-value', { - type: 'radio', - name: 'cp-creation-owned', - value: 1, - checked: 'checked' - }), - h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue), - h('input#cp-creation-owned-false.cp-creation-owned-value', { - type: 'radio', - name: 'cp-creation-owned', - value: 0 - }), - h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse) + createHelper('/faq.html#keywords-owned', Messages.creation_owned1) ]); - $creation.append(owned); - - // If set to "open pad", check "open pad" - if (!cfg.owned && typeof cfg.owned !== "undefined") { - $creation.find('#cp-creation-owned-false').attr('checked', true); - } // Life time var expire = h('div.cp-creation-expire', [ - h('h2', [ - Messages.creation_expireTitle, - createHelper(Messages.creation_expire1, Messages.creation_expire2) - ]), - h('div.cp-creation-help-container', [ - setHTML(h('p'), Messages.creation_expire1), - setHTML(h('p'), Messages.creation_expire2) + h('label.cp-checkmark', [ + h('input', { + type: 'checkbox', + id: 'cp-creation-expire' + }), + h('span.cp-checkmark-mark'), + Messages.creation_expire ]), - h('input#cp-creation-expire-false.cp-creation-expire-value', { - type: 'radio', - name: 'cp-creation-expire', - value: 0, - checked: 'checked' - }), - h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse), - h('input#cp-creation-expire-true.cp-creation-expire-value', { - type: 'radio', - name: 'cp-creation-expire', - value: 1 - }), - h('label', { 'for': 'cp-creation-expire-true' }, [ - Messages.creation_expireTrue, - h('span.cp-creation-expire-picker', [ - h('input#cp-creation-expire-val', { - type: "number", - min: 1, - max: 100, - value: 3 - }), - h('select#cp-creation-expire-unit', [ - h('option', { value: 'hour' }, Messages.creation_expireHours), - h('option', { value: 'day' }, Messages.creation_expireDays), - h('option', { - value: 'month', - selected: 'selected' - }, Messages.creation_expireMonths) - ]) + createHelper('faq.html#keywords-expiring', Messages.creation_expire2), + h('div.cp-creation-expire-picker.cp-creation-slider', [ + h('input#cp-creation-expire-val', { + type: "number", + min: 1, + max: 100, + value: 3 + }), + h('select#cp-creation-expire-unit', [ + h('option', { value: 'hour' }, Messages.creation_expireHours), + h('option', { value: 'day' }, Messages.creation_expireDays), + h('option', { + value: 'month', + selected: 'selected' + }, Messages.creation_expireMonths) ]) ]) ]); - $creation.append(expire); + + var templates = h('div.cp-creation-template', [ + h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]), + h('div.cp-creation-template-container', [ + h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') + ]) + ]); + + var settings = h('div.cp-creation-remember', [ + h('label.cp-checkmark', [ + h('input', { + type: 'checkbox', + id: 'cp-creation-remember' + }), + h('span.cp-checkmark-mark'), + Messages.creation_saveSettings + ]), + createHelper('/settings/#creation', Messages.creation_settings), + h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp) + ]); + + var createDiv = h('div.cp-creation-create'); + var $create = $(createDiv); + + $(h('div#cp-creation-form', [ + owned, + expire, + settings, + templates, + createDiv + ])).appendTo($creation); + + // Display templates + var selected = 0; + sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) { + if (!res.data || !Array.isArray(res.data)) { + return void console.error("Error: get the templates list"); + } + var data = res.data.slice().sort(function (a, b) { + if (a.name === b.name) { return 0; } + return a.name < b.name ? -1 : 1; + }); + data.unshift({ + name: Messages.creation_noTemplate, + id: 0, + icon: h('span.fa.fa-file') + }); + data.push({ + name: Messages.creation_newTemplate, + id: -1, + icon: h('span.fa.fa-bookmark') + }); + var $container = $(templates).find('.cp-creation-template-container').html(''); + data.forEach(function (obj, idx) { + var name = obj.name; + var $span = $('', { + 'class': 'cp-creation-template-element', + 'title': name, + }).appendTo($container); + console.log(obj.id); + $span.data('id', obj.id); + if (idx === 0) { $span.addClass('cp-creation-template-selected'); } + $span.append(obj.icon || UI.getFileIcon({type: type})); + $('', {'class': 'cp-creation-template-element-name'}).text(name) + .appendTo($span); + $span.click(function () { + $container.find('.cp-creation-template-selected') + .removeClass('cp-creation-template-selected'); + $span.addClass('cp-creation-template-selected'); + selected = idx; + }); + + // Add thumbnail if it exists + if (obj.thumbnail) { + common.addThumbnail(obj.thumbnail, $span, function () {}); + } + }); + }); + // Change template selection when Tab is pressed + var next = function (revert) { + var max = $creation.find('.cp-creation-template-element').length; + selected = revert ? + (--selected < 0 ? max-1 : selected) : + ++selected % max; + $creation.find('.cp-creation-template-element') + .removeClass('cp-creation-template-selected'); + $($creation.find('.cp-creation-template-element').get(selected)) + .addClass('cp-creation-template-selected'); + }; + + + // Display expiration form when checkbox checked + $creation.find('#cp-creation-expire').on('change', function () { + if ($(this).is(':checked')) { + $creation.find('.cp-creation-expire-picker:not(.active)').addClass('active'); + $creation.find('#cp-creation-expire-val').focus(); + return; + } + $creation.find('.cp-creation-expire-picker').removeClass('active'); + $creation.focus(); + }); + + // Display settings help when checkbox checked + $creation.find('#cp-creation-remember').on('change', function () { + if ($(this).is(':checked')) { + $creation.find('.cp-creation-remember-help:not(.active)').addClass('active'); + return; + } + $creation.find('.cp-creation-remember-help').removeClass('active'); + $creation.focus(); + }); + + // Keyboard shortcuts $creation.find('#cp-creation-expire-val').keydown(function (e) { if (e.which === 9) { e.stopPropagation(); @@ -1928,15 +2012,23 @@ define([ } }); + + // Initial values + if (!cfg.owned && typeof cfg.owned !== "undefined") { + $creation.find('#cp-creation-owned').attr('checked', false); + } + if (cfg.skip) { + $creation.find('#cp-creation-remember').attr('checked', 'checked'); + } UIElements.setExpirationValue(cfg.expire, $creation); // Create the pad - var getFormValues = function (template) { + var getFormValues = function () { // Type of pad - var ownedVal = parseInt($('input[name="cp-creation-owned"]:checked').val()); + var ownedVal = $('#cp-creation-owned').is(':checked') ? 1 : 0; // Life time var expireVal = 0; - if(parseInt($('input[name="cp-creation-expire"]:checked').val())) { + if($('#cp-creation-expire').is(':checked')) { var unit = 0; switch ($('#cp-creation-expire-unit').val()) { case "hour" : unit = 3600; break; @@ -1947,62 +2039,48 @@ define([ expireVal = ($('#cp-creation-expire-val').val() || 0) * unit; } + var $template = $creation.find('.cp-creation-template-selected'); + var templateId = $template.data('id') || undefined; + return { owned: ownedVal, expire: expireVal, - template: template + templateId: templateId }; }; - var create = function (template) { - $creationContainer.remove(); + var create = function () { + var val = getFormValues(); - common.createPad(getFormValues(template), function () { - cb(); + var skip = $('#cp-creation-remember').is(':checked'); + common.setAttribute(['general', 'creation', 'skip'], skip, function (e) { + if (e) { return void console.error(e); } + }); + common.setAttribute(['general', 'creation', 'noTemplate'], skip, function (e) { + if (e) { return void console.error(e); } }); - }; - var $create = $(h('div.cp-creation-create', [ - h('h2', Messages.creation_createTitle) - ])).appendTo($creation); - // Pick a template? - sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) { - if (!data) { return; } - var $templateButton = $('