TodoApp - Style and translations

customize.dist/application_config.js

@@ -4,7 +4,7 @@ define(function() {
     /* Select the buttons displayed on the main page to create new collaborative sessions
      * Existing types : pad, code, poll, slide
      */
-    config.availablePadTypes = ['drive', 'pad', 'code', 'slide', 'poll', 'whiteboard', 'file', 'contacts'];
+    config.availablePadTypes = ['drive', 'pad', 'code', 'slide', 'poll', 'whiteboard', 'file', 'todo', 'contacts'];
     config.registeredOnlyTypes = ['file', 'contacts'];
 
     /*  Cryptpad apps use a common API to display notifications to users

customize.dist/src/less/toolbar.less

@@ -29,6 +29,7 @@
 .settingsColor { color: @toolbar-settings-bg; }
 .profileColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
+.todoColor { color:@toolbar-todo-bg; }
 
 .toolbar-container {
     display: flex;
@@ -284,6 +285,11 @@ body {
         @color: @toolbar-profile-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-todo {
+        @bgcolor: @toolbar-todo-bg;
+        @color: @toolbar-todo-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -107,7 +107,8 @@
 @toolbar-settings-color: #fff;
 @toolbar-profile-bg: #0087ff;
 @toolbar-profile-color: #fff;
-
+@toolbar-todo-bg: #7bccd1;
+@toolbar-todo-color: #000;
 
 @topbar-back: #fff;
 @topbar-color: #000;

customize.dist/translations/messages.fr.js

@@ -13,6 +13,7 @@ define(function () {
     out.type.whiteboard = "Tableau Blanc";
     out.type.file = "Fichier";
     out.type.media = "Média";
+    out.type.todo = "Todo";
     out.type.contacts = "Contacts";
 
     out.button_newpad = 'Nouveau document texte';
@@ -469,6 +470,8 @@ define(function () {
     out.download_button = "Déchiffrer et télécharger";
     out.download_mt_button = "Télécharger";
 
+    out.todo_title = "CryptTodo";
+
     // general warnings
     out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. <a href='/about.html#pinning'>En savoir plus...</a>";
 

customize.dist/translations/messages.js

@@ -13,6 +13,7 @@ define(function () {
     out.type.whiteboard = 'Whiteboard';
     out.type.file = 'File';
     out.type.media = 'Media';
+    out.type.todo = "Todo";
     out.type.contacts = 'Contacts';
 
     out.button_newpad = 'New Rich Text pad';
@@ -476,6 +477,8 @@ define(function () {
     out.download_button = "Decrypt & Download";
     out.download_mt_button = "Download";
 
+    out.todo_title = "CryptTodo";
+
     // general warnings
     out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
 

www/common/common-interface.js

@@ -276,6 +276,7 @@ define([
     var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
     var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
     var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
+    var $todoIcon = $('<span>', {"class": "fa fa-tasks todoColor"});
     var $contactsIcon = $('<span>', {"class": "fa fa-users friendsColor"});
     UI.getIcon = function (type) {
         var $icon;
@@ -287,6 +288,7 @@ define([
             case 'slide': $icon = $slideIcon.clone(); break;
             case 'poll': $icon = $pollIcon.clone(); break;
             case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
+            case 'todo': $icon = $todoIcon.clone(); break;
             case 'contacts': $icon = $contactsIcon.clone(); break;
             default: $icon = $fileIcon.clone();
         }

www/todo/inner.js

@@ -1,8 +1,8 @@
 define([
     'jquery',
-    //'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     //'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    //'less!/file/todo.less',
+    'less!/todo/todo.less',
     //'less!/customize/src/less/cryptpad.less',
     'less!/customize/src/less/toolbar.less',
 ], function ($) {

www/todo/main.js

@@ -10,7 +10,7 @@ define([
     //'/common/media-tag.js',
     //'/bower_components/file-saver/FileSaver.min.js',
 
-    //'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/customize/src/less/cryptpad.less',
 ], function ($, Crypto, realtimeInput, Toolbar, Cryptpad /*, Visible, Notify*/) {
     var Messages = Cryptpad.Messages;
@@ -42,14 +42,13 @@ define([
 
         Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
 
-        var displayed = ['useradmin', 'newpad', 'limit', 'upgrade'];
-
         var configTb = {
-            displayed: displayed,
+            displayed: ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'],
             ifrw: ifrw,
             common: Cryptpad,
             //hideDisplayName: true,
             $container: $bar,
+            pageTitle: Messages.todo_title
         };
 
         APP.toolbar = Toolbar.create(configTb);

www/todo/todo.less

@@ -22,115 +22,7 @@ body {
     justify-content: center;
     align-items: center;
 }
-
-#app.ready {
-    background: url('/customize/bg3.jpg') no-repeat center center;
-    background-size: cover;
-    background-position: center;
-}
 .cryptpad-toolbar {
     padding: 0px;
     display: inline-block;
-}
-#file, #dl {
-    display: block;
-    height: 100%;
-    width: 100%;
-    border: @button-border solid black;
-}
-
-.inputfile {
-    width: 0.1px;
-    height: 0.1px;
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    z-index: -1;
-}
-
-media-tag {
-    img {
-        max-width: 100%;
-        max-height: ~"calc(100vh - 96px)";
-    }
-}
-
-#upload-form, #download-form {
-    padding: 0px;
-    margin: 0px;
-
-    position: relative;
-    width: 50vh;
-    height: 50vh;
-    display: block;
-    margin: 50px auto;
-    max-width: 80vw;
-    label {
-        line-height: ~"calc(50vh - 20px)";
-        text-align: center;
-        position: relative;
-        padding: 10px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        height: 50vh;
-        box-sizing: border-box;
-    }
-}
-#download-form {
-    label {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        white-space: normal;
-        word-wrap: break-word;
-        span {
-            width: 50vh;
-            max-width: 80vw;
-            text-align: center;
-            line-height: 1.5em;
-        }
-    }
-}
-.hovering {
-    background-color: rgba(255, 0, 115, 0.5) !important;
-}
-
-.block {
-    display: block;
-}
-.hidden {
-    display: none;
-}
-.inputfile + label {
-    //border: 2px solid black;
-    //background-color: rgba(50, 50, 50, .10);
-    display: block;
-}
-
-.inputfile:focus + label,
-.inputfile + label:hover {
-    //background-color: rgba(50, 50, 50, 0.30);
-}
-
-#progress {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-
-
-    transition: width 200ms;
-    width: 0%;
-    max-width: 100%;
-    max-height: 100%;
-    background-color: rgba(255, 0, 115, 0.75);
-    z-index: 10000;
-    display: block;
-}
-
-body #uploadStatusContainer {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: black;
-    opacity: 0.9;
-}
+}