diff --git a/customize.dist/pages.js b/customize.dist/pages.js index af4410010..90c0524d7 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -278,10 +278,6 @@ define([ }; loadingScreen = loadingScreen; // TODO use this - Pages['/settings/'] = Pages['/settings/index.html'] = function () { - return h('div#container'); - }; - Pages['/user/'] = Pages['/user/index.html'] = function () { return h('div#container'); }; @@ -509,5 +505,13 @@ define([ return loadingScreen(); }; + Pages['/settings/'] = Pages['/settings/index.html'] = function () { + return [ + h('div#toolbar'), + h('div#container'), + loadingScreen() + ]; + }; + return Pages; }); diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index 515c2b303..46aa918ce 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -27,6 +27,11 @@ html.cp, .cp body { // override bootstrap colors .btn-primary { background-color: @cp-blue; + &:hover { + color: #fff; + background-color: #025aa5; + border-color: #01549b; + } } body { @@ -567,10 +572,12 @@ noscript { /* Pin limit */ .limit-container { + display: inline-flex; + flex-flow: column-reverse; + width: 100%; + margin-top: 20px; .cryptpad-limit-bar { display: inline-block; - height: 26px; - width: 200px; max-width: 40vw; margin: 3px; box-sizing: border-box; @@ -578,8 +585,10 @@ noscript { background: white; position: relative; text-align: center; - line-height: 24px; vertical-align: middle; + width: ~"calc(100% - 6px)"; + height: 25px; + line-height: 25px; .usage { height: 100%; display: inline-block; @@ -607,7 +616,11 @@ noscript { } } .upgrade { - margin-left: 10px; + padding: 0; + line-height: 25px; + height: 25px; + margin: 0 3px; + border-radius: 0; } } diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 0c4ae362e..e5640e778 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -24,6 +24,7 @@ .friendsColor { color: @toolbar-friends-bg; } .whiteboardColor { color: @toolbar-whiteboard-bg; } .driveColor { color: @toolbar-drive-bg; } +.settingsColor { color: @toolbar-settings-bg; } .defaultColor { color: @toolbar-default-bg; } .toolbar-container { @@ -261,6 +262,11 @@ body { @color: @toolbar-friends-color; .addToolbarColors(@color, @bgcolor); } + &.app-settings { + @bgcolor: @toolbar-settings-bg; + @color: @toolbar-settings-color; + .addToolbarColors(@color, @bgcolor); + } } diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 63c737266..40ce76bef 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -101,6 +101,8 @@ @toolbar-friends-color: #fff; @toolbar-default-bg: #ddd; @toolbar-default-color: #000; +@toolbar-settings-bg: #0087ff; +@toolbar-settings-color: #fff; @topbar-back: #fff; diff --git a/customize.dist/template.js b/customize.dist/template.js index f6bc7cd9c..c8f6153d2 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -12,7 +12,7 @@ $(function () { var Messages = Cryptpad.Messages; var $body = $('body'); var isMainApp = function () { - return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive)\/$/.test(location.pathname); + return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname); }; var rightLink = function (ref, loc, txt) { @@ -160,6 +160,9 @@ $(function () { } else if (/slide/.test(pathname)) { $('body').append(h('body', Pages[pathname]()).innerHTML); require([ '/slide/main.js' ], ready); + } else if (/^\/settings\//.test(pathname)) { + $('body').append(h('body', Pages[pathname]()).innerHTML); + require([ '/settings/main.js', ], ready); } }); @@ -173,9 +176,7 @@ $(function () { ], function () { $body.append($topbar).append($main).append($footer); - if (/^\/settings\//.test(pathname)) { - require([ '/settings/main.js', ], function () {}); - } else if (/^\/profile\//.test(pathname)) { + if (/^\/profile\//.test(pathname)) { require([ '/profile/main.js'], function () {}); } else if (/^\/user\//.test(pathname)) { require([ '/user/main.js'], function () {}); diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index bca33cb26..1dfbd26c4 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -375,28 +375,37 @@ define(function () { ]; // Settings + out.settings_cat_account = "Compte"; + out.settings_cat_drive = "CryptDrive"; out.settings_title = "Préférences"; out.settings_save = "Sauver"; + + out.settings_backupCategory = "Sauvegarde"; out.settings_backupTitle = "Créer ou restaurer une sauvegarde de vos données"; - out.settings_backup = "Créer une sauvegarde"; - out.settings_restore = "Restaurer une sauvegarde"; - out.settings_resetTitle = "Vider votre drive"; + out.settings_backup = "Sauvegarder"; + out.settings_restore = "Restaurer"; + + out.settings_resetNewTitle = "Vider CryptDrive"; + out.settings_resetButotn = "Supprimer"; out.settings_reset = "Supprimer tous les fichiers et dossiers de votre CryptDrive"; out.settings_resetPrompt = "Cette action va supprimer tous les pads de votre drive.
"+ "Êtes-vous sûr de vouloir continuer ?
" + "Tapez “I love CryptPad” pour confirmer."; out.settings_resetDone = "Votre drive est désormais vide!"; out.settings_resetError = "Texte de vérification incorrect. Votre CryptDrive n'a pas été modifié."; - out.settings_resetTips = "Astuces et informations dans CryptDrive"; + + out.settings_resetTipsAction ="Réinitialiser"; + out.settings_resetTips = "Astuces"; out.settings_resetTipsButton = "Réinitialiser les astuces visibles dans CryptDrive"; out.settings_resetTipsDone = "Toutes les astuces sont de nouveau visibles."; - out.settings_importTitle = "Importer les pads récents de ce navigateur dans mon CryptDrive"; + out.settings_importTitle = "Importer les pads récents de ce navigateur dans votre CryptDrive"; out.settings_import = "Importer"; out.settings_importConfirm = "Êtes-vous sûr de vouloir importer les pads récents de ce navigateur dans le CryptDrive de votre compte utilisateur ?"; out.settings_importDone = "Importation terminée"; - out.settings_userFeedbackHint1 = "CryptPad peut envoyer des retours d'expérience très limités vers le serveur, de manière à nous permettre d'améliorer l'expérience des utilisateurs."; + out.settings_userFeedbackTitle = "Retour d'expérience"; + out.settings_userFeedbackHint1 = "CryptPad peut envoyer des retours d'expérience très limités vers le serveur, de manière à nous permettre d'améliorer l'expérience des utilisateurs. "; out.settings_userFeedbackHint2 = "Le contenu de vos pads et les clés de déchiffrement ne seront jamais partagés avec le serveur."; out.settings_userFeedback = "Activer l'envoi de retours d'expérience"; @@ -409,8 +418,9 @@ define(function () { out.settings_pinningError = "Un problème est survenu"; out.settings_usageAmount = "Vos pads épinglés occupent {0} Mo"; + out.settings_logoutEverywhereButton = "Se déconnecter"; out.settings_logoutEverywhereTitle = "Se déconnecter partout"; - out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions."; + out.settings_logoutEverywhere = "Se déconnecter de force de toutes les autres sessions."; out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils."; out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant."; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index ebc8aa20a..57b21decc 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -387,28 +387,37 @@ define(function () { out.register_alreadyRegistered = "This user already exists, do you want to log in?"; // Settings + out.settings_cat_account = "Account"; + out.settings_cat_drive = "CryptDrive"; out.settings_title = "Settings"; out.settings_save = "Save"; + + out.settings_backupCategory = "Backup"; out.settings_backupTitle = "Backup or restore all your data"; out.settings_backup = "Backup"; out.settings_restore = "Restore"; - out.settings_resetTitle = "Clean your drive"; + + out.settings_resetNewTitle = "Clean CryptDrive"; + out.settings_resetButton = "Remove"; out.settings_reset = "Remove all the files and folders from your CryptDrive"; out.settings_resetPrompt = "This action will remove all the pads from your drive.
"+ "Are you sure you want to continue?
" + "Type “I love CryptPad” to confirm."; out.settings_resetDone = "Your drive is now empty!"; out.settings_resetError = "Incorrect verification text. Your CryptDrive has not been changed."; - out.settings_resetTips = "Tips in CryptDrive"; + + out.settings_resetTipsAction = "Reset"; + out.settings_resetTips = "Tips"; out.settings_resetTipsButton = "Reset the available tips in CryptDrive"; out.settings_resetTipsDone = "All the tips are now visible again."; - out.settings_importTitle = "Import this browser's recent pads in my CryptDrive"; + out.settings_importTitle = "Import this browser's recent pads in your CryptDrive"; out.settings_import = "Import"; out.settings_importConfirm = "Are you sure you want to import recent pads from this browser to your user account's CryptDrive?"; out.settings_importDone = "Import completed"; - out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience."; + out.settings_userFeedbackTitle = "Feedback"; + out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience. "; out.settings_userFeedbackHint2 = "Your pad's content will never be shared with the server."; out.settings_userFeedback = "Enable user feedback"; @@ -421,8 +430,9 @@ define(function () { out.settings_pinningError = "Something went wrong"; out.settings_usageAmount = "Your pinned pads occupy {0}MB"; + out.settings_logoutEverywhereButton = "Log out"; out.settings_logoutEverywhereTitle = "Log out everywhere"; - out.settings_logoutEverywhere = "Log out of all other web sessions"; + out.settings_logoutEverywhere = "Force log out of all other web sessions"; out.settings_logoutEverywhereConfirm = "Are you sure? You will need to log in with all your devices."; out.upload_serverError = "Server Error: unable to upload your file at this time."; diff --git a/www/drive/file.less b/www/drive/file.less index 41bc4f1e9..b53369c01 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -317,27 +317,6 @@ span { } } } - .limit-container { - display: inline-flex; - flex-flow: column-reverse; - width: 100%; - margin-top: 20px; - .upgrade { - padding: 0; - line-height: 25px; - height: 25px; - margin: 0 3px; - border-radius: 0; - } - .cryptpad-limit-bar { - width: ~"calc(100% - 6px)"; - height: 25px; - line-height: 25px; - .usage { - height: 100%; - } - } - } } /* CONTENT */ diff --git a/www/settings/main.js b/www/settings/main.js index 2f16aff70..f226b5bbc 100644 --- a/www/settings/main.js +++ b/www/settings/main.js @@ -3,14 +3,16 @@ define([ '/common/cryptpad-common.js', '/common/cryptget.js', '/common/mergeDrive.js', + '/common/toolbar2.js', '/bower_components/file-saver/FileSaver.min.js', - '/customize/header.js', +// '/customize/header.js', 'less!/customize/src/less/cryptpad.less', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + 'less!/customize/src/less/toolbar.less', 'less!/settings/main.less', -], function ($, Cryptpad, Crypt, Merge) { +], function ($, Cryptpad, Crypt, Merge, Toolbar) { var saveAs = window.saveAs; var USERNAME_KEY = 'cryptpad.username'; @@ -34,6 +36,22 @@ define([ }); }; + var categories = { + 'account': [ + 'infoBlock', + 'displayName', + 'languageSelector', + 'logoutEverywhere', + 'resetTips', + 'userFeedback' + ], + 'drive': [ + 'backupDrive', + 'importLocalPads', + 'resetDrive' + ] + }; + // Title block var createTitle = function () { return $('

').text(Messages.settings_title); @@ -43,27 +61,25 @@ define([ var obj = store.proxy; var $div = $('
', {'class': 'infoBlock'}); + var $account = $('
', {'class': 'element'}).appendTo($div); var accountName = obj.login_name || localStorage[Cryptpad.userNameKey]; - var $label = $('', {'class': 'label'}).text(Messages.user_accountName + ':'); + var $label = $('', {'class': 'label'}).text(Messages.user_accountName); var $name = $('').text(accountName || ''); if (!accountName) { $label.text(''); $name.text(Messages.settings_anonymous); } - - $div.append($label).append($name); + $account.append($label).append($name); var publicKey = obj.edPublic; if (publicKey) { + var $key = $('
', {'class': 'element'}).appendTo($div); var userHref = Cryptpad.getUserHrefFromKeys(accountName, publicKey); var $pubLabel = $('', {'class': 'label'}) - .text(Messages.settings_publicSigningKey + ':'); + .text(Messages.settings_publicSigningKey); var $pubKey = $('', {type: 'text', readonly: true}) - .css({ - width: '28em' - }) .val(userHref); - $div.append('
').append($pubLabel).append($pubKey); + $key.append($pubLabel).append($pubKey); } return $div; @@ -72,14 +88,14 @@ define([ // Create the block containing the display name field var createDisplayNameInput = function (store) { var obj = store.proxy; - var $div = $('
', {'class': 'displayName'}); + var $div = $('
', {'class': 'displayName element'}); $('