From 3d544133432743a2f141a9e78628b881a27720f7 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 27 Sep 2016 18:33:03 +0200 Subject: [PATCH] Improve the UI with FontAwesome icons --- bower.json | 3 +- customize.dist/BottomBar.html | 6 +-- customize.dist/DecorateToolbar.js | 11 +++- customize.dist/Header.html | 23 ++++++++ customize.dist/main.css | 17 ++++-- customize.dist/src/cryptpad.less | 16 ++++-- customize.dist/src/toolbar.less | 28 +++++++++- customize.dist/src/variables.less | 1 + customize.dist/toolbar.css | 28 +++++++++- customize.dist/translations/messages.fr.js | 3 +- customize.dist/translations/messages.js | 3 +- www/common/cryptpad-common.js | 63 ++++++++++++++++++++++ www/common/toolbar.js | 45 +++++++++++----- www/pad/index.html | 2 +- www/pad/inner.html | 1 + www/pad/main.js | 54 ++++++------------- 16 files changed, 232 insertions(+), 72 deletions(-) create mode 100644 customize.dist/Header.html diff --git a/bower.json b/bower.json index 60040c9ee..fef2e7adb 100644 --- a/bower.json +++ b/bower.json @@ -39,6 +39,7 @@ "diff-dom": "#gh-pages", "alertifyjs": "^1.0.11", "spin.js": "^2.3.2", - "scrypt-async": "^1.2.0" + "scrypt-async": "^1.2.0", + "components-font-awesome": "^4.6.3" } } diff --git a/customize.dist/BottomBar.html b/customize.dist/BottomBar.html index 70eb8ee86..827cef5cd 100644 --- a/customize.dist/BottomBar.html +++ b/customize.dist/BottomBar.html @@ -2,15 +2,15 @@
-

-

-
+

+

+
+
+
+
+ + + +

+

+
+ +
+

+

+
+
+
diff --git a/customize.dist/main.css b/customize.dist/main.css index dd14889f0..38edb7a59 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -209,10 +209,9 @@ tbody td:last-child { border-right: none; } /* Bottom Bar */ +.top-bar, .bottom-bar { position: fixed; - bottom: 0px; - right: 0px; height: 4%; height: 2.5em; display: inline-block; @@ -220,23 +219,35 @@ tbody td:last-child { background: #302B28; border-top: 1px solid #444; } +.top-bar a, .bottom-bar a { color: #46E981; text-decoration: none; } +.top-bar p, .bottom-bar p { margin: -1px; font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; font-size: 20px; display: block; - float: left; + float: right; + margin-left: 10px; padding-top: 3px; color: #fafafa; } +.top-bar img, .bottom-bar img { margin-right: 4px; position: relative; } +.bottom-bar { + bottom: 0px; + right: 0px; +} +.top-bar { + top: 0px; + right: 0px; +} .bottom-bar-left { display: block; float: left; diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index 59eee286a..9c9a3ae22 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -187,7 +187,6 @@ p, pre, td, a, table, tr { margin-bottom: 2 * 6px; white-space: nowrap; } - /* Tables */ table { @@ -248,10 +247,8 @@ tbody { /* Bottom Bar */ -.bottom-bar { +.top-bar, .bottom-bar { position:fixed; - bottom:0px; - right:0px; height:4%; height: 2.5em; @@ -270,7 +267,8 @@ tbody { font-size: 20px; display:block; - float:left; + float:right; + margin-left: 10px; padding-top:3px; color: @fore; } @@ -279,6 +277,14 @@ tbody { position: relative; } } +.bottom-bar { + bottom: 0px; + right: 0px; +} +.top-bar { + top: 0px; + right: 0px; +} .bottom-bar-left { display:block; diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index 7534c4870..7a7b437b3 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -30,7 +30,7 @@ padding: 0 10px; height: 1.5em; line-height: 25px; - height: 22px; + height: 100%; &.cryptpad-back { padding: 0; font-weight: bold; @@ -42,11 +42,16 @@ button { height: 100%; background-color: inherit; + background-image: linear-gradient(to bottom,#fff,#e4e4e4); border: 1px solid #A6A6A6; - border-radius: 5px; + border-bottom-color: #979797; + border-radius: 3px; margin-right: 5px; padding-right: 5px; padding-left: 5px; + &:hover { + background-image:linear-gradient(to bottom,#f2f2f2,#ccc); + } } .rightside-button { float: right; @@ -91,4 +96,23 @@ .cryptpad-toolbar-username { font-style: italic; } +.lag { + display: inline-block; + vertical-align: middle; + padding: 0 !important; + margin: 0 !important; + height: 15px !important; + width: 15px !important; + border-radius: 50%; + border: 1px solid @cp-outline; +} +.lag-green { + background-color: @cp-green; +} +.lag-red { + background-color: @cp-red; +} +.lag-orange { + background-color: @cp-orange; +} diff --git a/customize.dist/src/variables.less b/customize.dist/src/variables.less index 9b59651ad..14e6de373 100644 --- a/customize.dist/src/variables.less +++ b/customize.dist/src/variables.less @@ -8,6 +8,7 @@ @cp-red: #FF0073; // remove red @cp-outline: #444; +@cp-orange: #FE9A2E; // alertify things @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 7e8fdc8b1..82eebb356 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -29,7 +29,7 @@ padding: 0 10px; height: 1.5em; line-height: 25px; - height: 22px; + height: 100%; } .cryptpad-toolbar div.cryptpad-back { padding: 0; @@ -40,12 +40,17 @@ .cryptpad-toolbar button { height: 100%; background-color: inherit; + background-image: linear-gradient(to bottom, #fff, #e4e4e4); border: 1px solid #A6A6A6; - border-radius: 5px; + border-bottom-color: #979797; + border-radius: 3px; margin-right: 5px; padding-right: 5px; padding-left: 5px; } +.cryptpad-toolbar button:hover { + background-image: linear-gradient(to bottom, #f2f2f2, #ccc); +} .cryptpad-toolbar .rightside-button { float: right; cursor: pointer; @@ -83,3 +88,22 @@ .cryptpad-toolbar-username { font-style: italic; } +.lag { + display: inline-block; + vertical-align: middle; + padding: 0 !important; + margin: 0 !important; + height: 15px !important; + width: 15px !important; + border-radius: 50%; + border: 1px solid #444; +} +.lag-green { + background-color: #46E981; +} +.lag-red { + background-color: #FF0073; +} +.lag-orange { + background-color: #FE9A2E; +} diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 6f5fc6c8d..dd2fb372a 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -31,6 +31,7 @@ define(function () { out.peopleAreEditing = '{0} personnes éditent le document'; out.oneViewer = '1 lecteur'; out.viewers = '{0} lecteurs'; + out.anonymous = "Vous êtes actuellement anonyme"; out.importButton = 'IMPORTER'; out.importButtonTitle = 'Importer un document depuis un fichier local'; @@ -179,7 +180,7 @@ define(function () { // BottomBar.html - out.bottom_love = 'Fait avec en '; + out.bottom_france = 'Fait avec en '; out.bottom_support = 'Un projet XWiki SAS Labs avec le soutien de OpenPaaS-ng'; return out; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index f13409b72..eea13040f 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -31,6 +31,7 @@ define(function () { out.peopleAreEditing = '{0} people are editing'; out.oneViewer = '1 viewer'; out.viewers = '{0} viewers'; + out.anonymous = "You are currently anonymous"; out.importButton = 'IMPORT'; out.importButtonTitle = 'Import a document from a local file'; @@ -179,7 +180,7 @@ define(function () { // BottomBar.html - out.bottom_love = 'Made with in '; + out.bottom_france = 'Made with in '; out.bottom_support = 'An XWiki SAS Labs Project with the support of OpenPaaS-ng'; return out; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 8aa391496..be31e9f5e 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -607,6 +607,69 @@ define([ }; }; + /* + * Buttons + */ + var createButton = common.createButton = function (type, rightside) { + var button; + var size = "17px"; + switch (type) { + case 'export': + button = $('