summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/images/pixelated-logo-orange.svg28
-rw-r--r--web-ui/app/images/pixelated-logo_symbol_orange.pngbin4200 -> 0 bytes
-rw-r--r--web-ui/app/images/pixelated-screenshot.pngbin345279 -> 0 bytes
-rw-r--r--web-ui/app/index.html48
-rw-r--r--web-ui/app/js/foundation/off_canvas.js20
-rw-r--r--web-ui/app/js/mail_list/ui/mail_list.js2
-rw-r--r--web-ui/app/js/mail_view/ui/mail_view.js2
-rw-r--r--web-ui/app/js/mail_view/ui/recipients/recipients_input.js2
-rw-r--r--web-ui/app/js/mail_view/ui/send_button.js47
-rw-r--r--web-ui/app/js/mixins/with_mail_edit_base.js1
-rw-r--r--web-ui/app/js/page/events.js4
-rw-r--r--web-ui/app/locales/en-us/translation.json1
-rw-r--r--web-ui/app/locales/en/translation.json1
-rw-r--r--web-ui/app/scss/_colors.scss39
-rw-r--r--web-ui/app/scss/_mixins.scss7
-rw-r--r--web-ui/app/scss/_read.scss12
-rw-r--r--web-ui/app/scss/_security.scss6
-rw-r--r--web-ui/app/scss/style-guide.scss142
-rw-r--r--web-ui/app/scss/styles.scss122
-rw-r--r--web-ui/app/style-guide.html187
-rw-r--r--web-ui/app/templates/tags/tag.hbs2
-rw-r--r--web-ui/app/templates/tags/tag_list.hbs7
22 files changed, 233 insertions, 447 deletions
diff --git a/web-ui/app/images/pixelated-logo-orange.svg b/web-ui/app/images/pixelated-logo-orange.svg
deleted file mode 100644
index 7b141531..00000000
--- a/web-ui/app/images/pixelated-logo-orange.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="-50 325.561 509.707 142.439" enable-background="new -50 325.561 509.707 142.439" xml:space="preserve">
-<g>
- <path fill="#F9A731" d="M-50,361.03v71.365L12.837,468l62.833-35.605V361.03l-62.857-35.469L-50,361.03z M10.262,442.178
- l-36.527-20.285v-43.872l36.586,20.999L10.262,442.178z M51.936,421.893l-36.148,20.285l0.067-43.123l36.081-21.034V421.893z
- M51.936,372.001l-38.985,23.113l-39.218-23.113l39.218-21.131L51.936,372.001z"/>
- <path fill="#F9A731" d="M119.505,367.893H99.537v59.328h13.52v-22.005h6.448c11.579,0,20.279-6.832,20.279-19.056
- C139.784,373.863,131.084,367.893,119.505,367.893z M116.866,394.429h-3.809v-15.75h3.809c5.323,0,10.357,1.798,10.357,7.91
- C127.224,392.631,122.189,394.429,116.866,394.429z"/>
- <rect x="144.309" y="367.893" fill="#F9A731" width="13.52" height="59.328"/>
- <polygon fill="#F9A731" points="216.516,367.893 199.689,367.893 188.759,384.075 177.827,367.893 161.721,367.893
- 180.417,395.291 160.228,427.221 176.982,427.221 188.759,407.014 200.534,427.221 218.01,427.221 197.099,395.291 "/>
- <polygon fill="#F9A731" points="220.128,427.221 254.069,427.221 254.069,415.356 233.647,415.356 233.647,403.418
- 253.207,403.418 253.207,391.552 233.647,391.552 233.647,379.76 254.069,379.76 254.069,367.893 220.128,367.893 "/>
- <path fill="#F9A731" d="M304.807,367.893l-19.156,47.463H272.33v-47.463h-13.52v59.328h22.053h11.888h2.636l4.386-11.865h22.578
- l4.391,11.865h14.524l-23.944-59.328C317.322,367.893,304.807,367.893,304.807,367.893z M304.377,403.489l6.614-17.257h0.145
- l6.615,17.257H304.377z"/>
- <polygon fill="#F9A731" points="329.939,379.76 344.073,379.76 344.073,427.221 357.592,427.221 357.592,379.76 371.687,379.76
- 371.687,367.893 329.939,367.893 "/>
- <polygon fill="#F9A731" points="376.265,427.221 410.207,427.221 410.207,415.356 389.785,415.356 389.785,403.418
- 409.344,403.418 409.344,391.552 389.785,391.552 389.785,379.76 410.207,379.76 410.207,367.893 376.265,367.893 "/>
- <path fill="#F9A731" d="M429.792,367.893h-14.94v59.328h14.94c16.324,0,29.914-12.37,29.914-29.699
- C459.707,380.262,446.044,367.893,429.792,367.893z M430.457,415.138h-2.084v-35.163h2.084c10.067,0,16.9,7.695,16.9,17.619
- C447.285,407.516,440.455,415.138,430.457,415.138z"/>
-</g>
-</svg>
diff --git a/web-ui/app/images/pixelated-logo_symbol_orange.png b/web-ui/app/images/pixelated-logo_symbol_orange.png
deleted file mode 100644
index 5ee5cc2f..00000000
--- a/web-ui/app/images/pixelated-logo_symbol_orange.png
+++ /dev/null
Binary files differ
diff --git a/web-ui/app/images/pixelated-screenshot.png b/web-ui/app/images/pixelated-screenshot.png
deleted file mode 100644
index 8baa9ee6..00000000
--- a/web-ui/app/images/pixelated-screenshot.png
+++ /dev/null
Binary files differ
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 87ab000d..47116eb5 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -21,13 +21,36 @@
<div class="inner-wrap">
<section id="left-pane" class="left-off-canvas-menu">
<a class="left-off-canvas-logo" href="#">
- <img id="pixelated-logo" src="/assets/images/pixelated-logo-orange.svg" alt="Pixelated">
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="30.4 316.8 555.2 155.2" enable-background="new 30.4 316.8 555.2 155.2" xml:space="preserve">
+ <g>
+ <path fill="#3E3B38" d="M30.4,355.5v77.8L98.9,472l68.5-38.7v-77.8l-68.5-38.7L30.4,355.5z M96,443.9l-39.9-22v-47.7L96,396.9
+ V443.9z M141.2,421.8l-39.4,22v-47l39.4-23C141.2,373.8,141.2,421.8,141.2,421.8z M141.2,367.5l-42.4,25.2l-42.8-25.2l42.8-23
+ L141.2,367.5z"/>
+ <path fill="#3E3B38" d="M214.9,363.1h-21.8v64.6h14.7v-24h7.1c12.7,0,22-7.3,22-20.8C237,369.7,227.4,363.1,214.9,363.1z M212,392
+ h-4.2v-17.1h4.2c5.9,0,11.3,2,11.3,8.6S217.9,392,212,392z"/>
+ <rect x="241.9" y="363.1" fill="#3E3B38" width="14.7" height="64.6"/>
+ <polygon fill="#3E3B38" points="320.7,363.1 302.3,363.1 290.3,380.7 278.3,363.1 261,363.1 281.3,392.9 259.2,427.7 277.6,427.7
+ 290.3,405.7 303.1,427.7 322.2,427.7 299.4,392.9 "/>
+ <polygon fill="#3E3B38" points="324.6,427.7 361.6,427.7 361.6,414.7 339.3,414.7 339.3,401.8 360.6,401.8 360.6,388.8
+ 339.3,388.8 339.3,376 361.6,376 361.6,363.1 324.6,363.1 "/>
+ <path fill="#3E3B38" d="M416.6,363.1l-20.8,51.7h-14.4v-51.7h-14.7v64.6h24h13h2.9l4.9-13H436l4.9,13h15.9l-26.2-64.6H416.6z
+ M416.2,401.8l7.1-18.8h0.2l7.1,18.8H416.2z"/>
+ <polygon fill="#3E3B38" points="444.1,376 459.5,376 459.5,427.7 474.2,427.7 474.2,376 489.6,376 489.6,363.1 444.1,363.1 "/>
+ <polygon fill="#3E3B38" points="494.5,427.7 531.5,427.7 531.5,414.7 509.4,414.7 509.4,401.8 530.7,401.8 530.7,388.8
+ 509.4,388.8 509.4,376 531.5,376 531.5,363.1 494.5,363.1 "/>
+ <path fill="#3E3B38" d="M553,363.1h-16.2v64.6H553c17.9,0,32.6-13.5,32.6-32.3C585.6,376.5,570.6,363.1,553,363.1z M553.5,414.5
+ h-2.2v-38.2h2.2c11,0,18.4,8.3,18.4,19.1C571.9,406.2,564.5,414.5,553.5,414.5z"/>
+ </g>
+ </svg>
</a>
- <a class="fake-left-off-canvas-toggle" href="#">
- <i class=" toggle fa fa-navicon"></i>
+ <a class="side-nav-toggle side-nav-toggle-icon" href="#">
+ <i class="toggle fa fa-navicon"></i>
</a>
<nav id="tag-list"></nav>
- <nav id="logout"></nav>
+ <div class="side-nav-bottom">
+ <nav id="logout"></nav>
+ </div>
</section>
</div>
</div>
@@ -39,9 +62,9 @@
</header>
<div class="inner-wrap">
+ <a class="left-off-canvas-toggle" href="#">
+ </a>
<article id='middle-pane-container' class="small-5 medium-5 large-5 columns no-padding">
- <a class="left-off-canvas-toggle" href="#">
- </a>
<section id="top-pane" class="small-12 large-12 no-padding">
<div id="compose-search-trigger">
<div id="compose" class="column small-12 large-4 no-padding">
@@ -61,8 +84,7 @@
</article>
<section id="right-pane" class="small-7 medium-7 large-7 columns">
- </section>
-
+ </section>
</div>
</div>
@@ -79,18 +101,8 @@
<script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script>
<!--usemin_end-->
-
-
<script>
$(document).foundation();
</script>
-
-<script>
-$('.fake-left-off-canvas-toggle').click(function (ev) {
- ev.preventDefault();
- $('.left-off-canvas-toggle').click();
- });
-</script>
-
</body>
</html>
diff --git a/web-ui/app/js/foundation/off_canvas.js b/web-ui/app/js/foundation/off_canvas.js
index 8dfd75ba..805dfab8 100644
--- a/web-ui/app/js/foundation/off_canvas.js
+++ b/web-ui/app/js/foundation/off_canvas.js
@@ -19,13 +19,29 @@ define(['flight/lib/component', 'page/events'], function (defineComponent, event
return defineComponent(function() {
- this.closeSlider = function (){
- $('.exit-off-canvas').click();
+ this.closeSlider = function (ev){
+ $('.off-canvas-wrap.content').removeClass('move-right');
+ this.toggleTagsVisibility();
+ };
+
+ this.toggleSlideContent = function (ev) {
+ ev.preventDefault();
+ $('.left-off-canvas-toggle').click();
+ this.toggleTagsVisibility();
+ };
+
+ this.toggleTagsVisibility = function () {
+ if ($('.off-canvas-wrap.content').hasClass('move-right')) {
+ $('#custom-tag-list').addClass('expanded');
+ } else {
+ $('#custom-tag-list').removeClass('expanded');
+ }
};
this.after('initialize', function () {
this.on($('#middle-pane-container'), 'click', this.closeSlider);
this.on($('#right-pane'), 'click', this.closeSlider);
+ this.on($('.side-nav-toggle'), 'click', this.toggleSlideContent);
});
});
});
diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js
index 69327a57..18d36049 100644
--- a/web-ui/app/js/mail_list/ui/mail_list.js
+++ b/web-ui/app/js/mail_list/ui/mail_list.js
@@ -93,7 +93,6 @@ define(
this.showMails = function (event, data) {
this.updateCurrentTagAndMail(data);
this.refreshMailList(null, data);
- this.triggerScrollReset();
this.triggerMailOpenForPopState(data);
this.openMailFromUrl();
};
@@ -114,6 +113,7 @@ define(
this.cleanSelected = function () {
this.attr.currentMailIdent = '';
+ this.triggerScrollReset();
};
this.respondWithCheckedMails = function (ev, caller) {
diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 4faba468..578dcbb9 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -108,7 +108,7 @@ define(
var status = ['encrypted'];
if(_.any(mail.security_casing.locks, function (lock) { return lock.state === 'valid'; })) { status.push('encryption-valid'); }
- else { status.push('encryption-failure'); }
+ else { status.push('encryption-error'); }
return status.join(' ');
};
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
index 459c8b24..012d7fb9 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
@@ -136,7 +136,7 @@ define([
};
this.warnSendButtonOfInputState = function () {
- var toTrigger = _.isEmpty(this.$node.val()) ? events.ui.recipients.inputHasNoMail : events.ui.recipients.inputHasMail;
+ var toTrigger = _.isEmpty(this.$node.val()) ? events.ui.recipients.inputFieldIsEmpty : events.ui.recipients.inputFieldHasCharacters;
this.trigger(document, toTrigger, { name: this.attr.name });
};
diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js
index 8f168ecc..5c1c3506 100644
--- a/web-ui/app/js/mail_view/ui/send_button.js
+++ b/web-ui/app/js/mail_view/ui/send_button.js
@@ -37,35 +37,37 @@ define([
this.$node.prop('disabled', true);
};
- this.atLeastOneFieldHasRecipients = function () {
+ this.atLeastOneInputFieldHasRecipients = function () {
return _.any(_.values(this.attr.recipients), function (e) { return !_.isEmpty(e); });
};
- this.atLeastOneInputHasMail = function () {
- return _.any(_.values(this.attr.inputHasMail), function (e) { return e === true; });
+ this.atLeastOneInputFieldHasCharacters = function () {
+ return _.any(_.values(this.attr.inputFieldHasCharacters), function (e) { return e === true; });
};
this.updateButton = function () {
- if (this.atLeastOneInputHasMail() || this.atLeastOneFieldHasRecipients()) {
- this.enableButton();
- } else {
- this.disableButton();
+ if (this.attr.sendingInProgress === false) {
+ if (this.atLeastOneInputFieldHasCharacters() || this.atLeastOneInputFieldHasRecipients()) {
+ this.enableButton();
+ } else {
+ this.disableButton();
+ }
}
};
- this.inputHasNoMail = function (ev, data) {
- this.attr.inputHasMail[data.name] = false;
+ this.inputFieldIsEmpty = function (ev, data) {
+ this.attr.inputFieldHasCharacters[data.name] = false;
this.updateButton();
};
- this.inputHasMail = function (ev, data) {
- this.attr.inputHasMail[data.name] = true;
+ this.inputFieldHasCharacters = function (ev, data) {
+ this.attr.inputFieldHasCharacters[data.name] = true;
this.updateButton();
};
this.updateRecipientsForField = function (ev, data) {
this.attr.recipients[data.recipientsName] = data.newRecipients;
- this.attr.inputHasMail[data.recipientsName] = false;
+ this.attr.inputFieldHasCharacters[data.recipientsName] = false;
this.updateButton();
};
@@ -77,31 +79,34 @@ define([
this.off(document, events.ui.mail.recipientsUpdated);
}.bind(this)));
- this.trigger(document, events.ui.recipients.doCompleteInput);
this.disableButton();
this.$node.text(viewHelper.i18n('sending-mail'));
+ this.attr.sendingInProgress = true;
+
+ this.trigger(document, events.ui.recipients.doCompleteInput);
};
- this.forceEnableButton = function () {
- this.enableButton();
+ this.resetButton = function () {
+ this.attr.sendingInProgress = false;
this.$node.html(viewHelper.i18n('send-button'));
+ this.enableButton();
};
this.after('initialize', function () {
this.attr.recipients = {};
- this.attr.inputHasMail = {};
- this.$node.html(viewHelper.i18n('send-button'));
+ this.attr.inputFieldHasCharacters = {};
+ this.resetButton();
- this.on(document, events.ui.recipients.inputHasMail, this.inputHasMail);
- this.on(document, events.ui.recipients.inputHasNoMail, this.inputHasNoMail);
+ this.on(document, events.ui.recipients.inputFieldHasCharacters, this.inputFieldHasCharacters);
+ this.on(document, events.ui.recipients.inputFieldIsEmpty, this.inputFieldIsEmpty);
this.on(document, events.ui.recipients.updated, this.updateRecipientsForField);
this.on(this.$node, 'click', this.updateRecipientsAndSendMail);
this.on(document, events.dispatchers.rightPane.clear, this.teardown);
- this.on(document, events.ui.sendbutton.enable, this.enableButton);
- this.on(document, events.mail.send_failed, this.forceEnableButton);
+ this.on(document, events.ui.sendbutton.enable, this.resetButton);
+ this.on(document, events.mail.send_failed, this.resetButton);
this.disableButton();
});
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index 3332da91..9942e747 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -136,6 +136,7 @@ define(
events.ui.userAlerts.displayMessage,
{message: i18n.get('One or more of the recipients are not valid emails')}
);
+ this.trigger(events.mail.send_failed);
}
};
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index ff9ed10a..f7e626f8 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -85,8 +85,8 @@ define(function () {
selectLast: 'ui:recipients:selectLast',
unselectAll: 'ui:recipients:unselectAll',
addressesExist: 'ui:recipients:addressesExist',
- inputHasMail: 'ui:recipients:inputHasMail',
- inputHasNoMail: 'ui:recipients:inputHasNoMail',
+ inputFieldHasCharacters: 'ui:recipients:inputFieldHasCharacters',
+ inputFieldIsEmpty: 'ui:recipients:inputFieldIsEmpty',
doCompleteInput: 'ui:recipients:doCompleteInput',
doCompleteRecipients: 'ui:recipients:doCompleteRecipients'
}
diff --git a/web-ui/app/locales/en-us/translation.json b/web-ui/app/locales/en-us/translation.json
index 24eb2899..8cdb419e 100644
--- a/web-ui/app/locales/en-us/translation.json
+++ b/web-ui/app/locales/en-us/translation.json
@@ -44,6 +44,7 @@
"you": "you",
"encrypted": "Encrypted",
"encrypted encryption-failure": "You are not authorized to see this message.",
+ "encrypted encryption-error": "Message was encrypted but we couldn't decrypt it.",
"encrypted encryption-valid": "Message was transmitted securely.",
"not-encrypted": "Message was readable during transmission.",
"signed": "Certified sender.",
diff --git a/web-ui/app/locales/en/translation.json b/web-ui/app/locales/en/translation.json
index 24eb2899..8cdb419e 100644
--- a/web-ui/app/locales/en/translation.json
+++ b/web-ui/app/locales/en/translation.json
@@ -44,6 +44,7 @@
"you": "you",
"encrypted": "Encrypted",
"encrypted encryption-failure": "You are not authorized to see this message.",
+ "encrypted encryption-error": "Message was encrypted but we couldn't decrypt it.",
"encrypted encryption-valid": "Message was transmitted securely.",
"not-encrypted": "Message was readable during transmission.",
"signed": "Certified sender.",
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 22897ac0..da571405 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -1,19 +1,38 @@
-$warning: #F7E8AF;
-$search-highlight: #FFEF29;
+/* Pixelated Color Palette - don't change these! */
+$dark_slate_gray: #3E3A37;
+$light_blue: #3DABC4;
+$dark_blue: #178CA6;
+$light_orange: #FF9C00;
+$dark_orange: #FF7902;
-$total_count_bg: #C0B9B9;
-$error: #D72A25;
-$attention: #F6A40A;
-$success: #2DAB49;
+/* Side nav background color */
+$navigation_background: $dark_slate_gray;
+
+/* Action buttons and links */
+$action_buttons: $light_blue;
+
+/* Primary Highlight*/
+$primary_highlight: $light_orange;
+
+/* Logo color*/
+$logo_color: $light_orange;
+/* Unread count dialog bubble background color */
+$secondary_callout: darken($primary_highlight, 5);
+
+/* Grayscale */
$contrast: #EEE;
$top_pane: #EAEAEA;
-$secondary: #3E3A37;
-$primary_color: #EF4E2F;
-$action_buttons: #2ba6cb;
+$total_count_bg: #C0B9B9;
+
+/* Feedback to Users */
+$warning: #F7E8AF;
+$search-highlight: #FFEF29;
-$secondary_callout: #FF7902;
+$error: #D72A25;
+$attention: #F6A40A;
+$success: #2DAB49;
$will_be_encrypted: #41cd60;
$wont_be_encrypted: #F6A40A;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 2d1f8f23..14a1679f 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -76,16 +76,17 @@
position: absolute;
bottom: -2px;
left: 1px;
- color: $secondary;
+ color: $navigation_background;
}
}
@mixin tags {
ul.tags {
li {
- background: #DDD;
+ font-size: 0.6rem;
+ background-color: lighten($action_buttons, 12);
+ color: white;
display: inline;
- font-size: 0.55em;
padding: 2px 3px;
margin: 0 1px;
position: relative;
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index bd30552c..7235df72 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -55,7 +55,7 @@
}
.bodyArea {
- padding: 35px 30px 0 30px;
+ padding: 15px 30px 0 30px;
}
.attachmentsAreaWrap {
@@ -64,6 +64,16 @@
.attachmentsArea {
border-top: 1px solid #DDD;
padding: 10px 0 0;
+
+ a {
+ color: $action_buttons;
+ text-decoration: none;
+ line-height: inherit;
+ &:hover, &:focus {
+ color: lighten($action_buttons, 10);
+ outline: none;
+ }
+ }
}
}
diff --git a/web-ui/app/scss/_security.scss b/web-ui/app/scss/_security.scss
index 6d68066b..2a6b60aa 100644
--- a/web-ui/app/scss/_security.scss
+++ b/web-ui/app/scss/_security.scss
@@ -20,6 +20,12 @@
content: "\f023 \f05e";
}
}
+ &.encryption-error {
+ background: $attention;
+ &:before {
+ content: "\f023 \f12a";
+ }
+ }
}
&.signed {
&:before {
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
deleted file mode 100644
index 7370aac6..00000000
--- a/web-ui/app/scss/style-guide.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-@import "compass/css3";
-@import "styles.scss";
-
-body {
- display: block;
- overflow: scroll !important;
-}
-
-div#style-guide-wrap {
- font-size: 1rem;
-}
-
-div#style-guide-wrap p {
- font-size: 1rem;
-}
-
-img.screenshot {
- max-width: 60%;
- margin: 0 auto;
- display: block;
-}
-
-nav {
- position: fixed;
- z-index: 10;
- height: 50px;
- width: 100%;
- background-color: #3e3a37;
- color: white;
- opacity: 0.95;
-}
-
-a.logo-anchor {
- color: white;
-
- &:hover {
- color: darken(white, 30);
- }
-}
-
-ul li {
- display: inline;
-}
-
-ul.typography li {
- display: inline-block;
- text-align: center;
- margin: 20px 10px 0 0;
- padding: 30px;
- min-height: 125px;
- min-width: 130px;
- border: 1px solid #EEE;
- background-color: white;
- border-radius: 5px;
-}
-
-ul.left, ul.right {
- padding: 12px;
- margin: 0px 25px;
- font-weight: bold;
-}
-
-ul.right {
- li {
- margin: 8px;
- }
-}
-
-section.guide-section {
- display: block;
- height: 100%;
- overflow-y: auto;
- padding: 66px 32px;
-
- &:nth-child(even) {
- background-color: $top_pane;
- }
-
- &:last-child {
- min-height: 666px;
- }
-}
-
-.color-card {
- width: 160px;
- height: 230px;
- border-radius: 5px;
- display: inline-block;
- margin-right: 15px;
-}
-
-.color-label {
- position: relative;
- top: 173px;
-}
-
-.color-label, .typeface-sample {
- background-color: white;
- border: 1px solid #eee;
- text-align: center;
- color: #344a5f;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
- padding: 10px 0;
-}
-
-.color-name {
- font-size: small;
-}
-
-/* Color Cards definition */
-
-.color-grid {
- margin-bottom: 25px;
- #primary-color-card { background-color: $primary_color; }
- #secondary-color-card { background-color: $secondary; }
- #top-pane-card { background-color: $top_pane; }
- #contrast-card { background-color: $contrast; }
- #action-buttons-card { background-color: $action_buttons; }
- #success-card { background-color: $success; }
- #attention-card { background-color: $attention; }
- #warning-card { background-color: $warning; }
- #error-card { background-color: $error; }
- #search-highlight-card { background-color: $search_highlight; }
- #count-background-card { background-color: $total_count_bg; }
-}
-/* Typeface cards definition*/
-ul.typography li h2 {
- &.bold-header { font-weight: bold; }
- &.extra-bold-header { font-weight: 800; }
- &.lighter-header { font-weight: lighter; }
-}
-
-ul.headers-and-sizes {
- margin: 20px 100px 0 0;
- display: inline-block;
-}
-
-section#icons i {
- font-size: xx-large;
- margin-right: 20px;
-} \ No newline at end of file
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index 7292f029..56c9ebbd 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -1,3 +1,4 @@
+
@import "compass/css3";
@import "colors";
@import "mixins";
@@ -37,7 +38,7 @@
vertical-align: top;
input[type=checkbox] {
@include check-box;
- margin: 7px 8px;
+ margin: 7px 13px 7px;
}
select {
padding: 1px 3px;
@@ -80,9 +81,9 @@
ul#mail-list {
clear: both;
li {
- height: 75px;
+ height: 66px;
position: relative;
- padding: 12px 10px;
+ padding: 8px 10px 10px 10px;
background: $contrast;
border-bottom: 1px solid white;
cursor: pointer;
@@ -100,6 +101,11 @@
}
a {
color: #333;
+ display: block;
+ height: 62px;
+ margin-top: -8px;
+ padding-top: 3px;
+ width: 106%;
}
}
.subject-and-tags {
@@ -114,8 +120,9 @@
line-height: 1.2;
margin: -3px 0 0 0;
li {
- background-color: #DDD;
- color: black;
+ font-size: 0.6rem;
+ background-color: lighten($action_buttons, 12);
+ color: white;
display: inline-block;
height: auto;
font-weight: 400;
@@ -156,6 +163,7 @@
}
&.selected {
background: #FFF;
+ z-index: 3;
a {
color: #333;
}
@@ -222,7 +230,7 @@ section {
input {
margin: 0;
padding: 8px 30px;
- color: $secondary;
+ color: $navigation_background;
background: white;
border: none;
transition: background-color 150ms ease-out;
@@ -245,10 +253,10 @@ section {
}
&#left-pane {
- background-color: $secondary;
+ background-color: $navigation_background;
color: white;
nav {
- border-right: 1px solid lighten($secondary, 10%);
+ border-right: 1px solid lighten($navigation_background, 10%);
ul#default-tag-list, #custom-tag-list {
li {
transition: background-color 150ms ease-out;
@@ -256,12 +264,12 @@ section {
cursor: pointer;
&:hover {
background: #CCC;
- color: $secondary;
+ color: $navigation_background;
}
&.selected {
font-weight: bold;
background: $contrast;
- color: $secondary;
+ color: $navigation_background;
}
}
}
@@ -273,6 +281,7 @@ section {
top: 1px;
left: 0;
border: 1px solid #FFF;
+ border-bottom: 1px solid white;
position: absolute;
opacity: 0.95;
}
@@ -283,18 +292,24 @@ section {
padding-left: 2px;
}
li {
- padding: 5px 10px 5px 16px;
+ padding: 5px 10px 5px 18px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:before {
font-size: 1.5em;
font-family: "FontAwesome";
- margin-right: 13px;
+ margin-right: 16px;
font-weight: normal;
position: relative;
top: 2px;
+ margin-left: -3px;
+ }
+
+ &:after {
+ padding-left: 10px;
}
+
&:nth-child(1) {
&:before {
content: "\f01c";
@@ -303,6 +318,7 @@ section {
&:nth-child(2) {
&:before {
content: "\f1d8";
+ margin-left: -5px;
}
}
&:nth-child(3) {
@@ -318,35 +334,72 @@ section {
&:nth-child(5) {
&:before {
content: "\f187";
+ margin-left: -5px;
}
}
}
}
ul#custom-tag-list {
+ visibility: hidden;
+ opacity: 0;
+ transition-duration: 500ms;
+ height: 220px;
+ overflow: auto;
+ background-color: lighten($navigation_background,1);
+
li {
white-space: nowrap;
overflow: hidden;
font-size: 0.8em;
padding: 5px 10px 5px 15px;
+ &.custom-tag {
+ text-overflow: ellipsis;
+ }
+
span.tag-label {
padding: 5px 20px 5px 38px;
}
}
}
+ ul#custom-tag-list.expanded {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ div.tags-icon {
+ border-top: 1px solid white;
+ padding-top: 25px;
+ margin-bottom: 20px;
+ i {
+ font-size: 1.5em;
+ font-family: "FontAwesome";
+ margin-right: 13px;
+ font-weight: normal;
+ position: relative;
+ top: 2px;
+ left: 16px;
+ }
+ span.tag-label {
+ font-size: 0.9rem;
+ padding-left: 16px;
+ margin-bottom: 10px;
+ }
+ }
+
ul#logout {
li {
color: $action_buttons;
- background-color: $secondary;
+ background-color: $navigation_background;
padding: 5px 10px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:hover {
background-color: $action_buttons;
- color: $secondary;
+ color: $navigation_background;
}
div {
@@ -370,7 +423,7 @@ section {
padding: 5px;
font-weight: 600;
margin: 0 10px;
- border-bottom: 1px dotted lighten($secondary, 10%);
+ border-bottom: 1px dotted lighten($navigation_background, 10%);
}
}
}
@@ -486,28 +539,36 @@ button {
}
}
-.fake-left-off-canvas-toggle {
+.side-nav-toggle, .side-nav-toggle-icon {
color: white;
+ cursor: pointer;
&:hover, &:focus {
color: white;
}
+ background: $navigation_background;
+ &.logout {
+ color: $action_buttons;
+ }
+}
- padding: 9px 0px 8px 19px;
+.side-nav-toggle-icon {
+ padding: 6px 0px 8px 19px;
display: block;
left: 0;
- background: $secondary;
top: 0;
position: relative;
- &.logout {
- color: $action_buttons;
- }
}
.left-off-canvas-logo {
- img {
- padding: 9px 6px 6px 6px;
- width: 163px;
+ svg {
+ width: 162px;
+ height: 56px;
+ padding-left: 6px;
+ padding-top: 2px;
+ path, polygon, rect {
+ fill: $logo_color;
+ }
}
}
@@ -515,7 +576,7 @@ button {
width: 50px;
position: absolute;
height: 100vh;
- background: $secondary;
+ background: $navigation_background;
ul.shortcuts {
li {
@@ -527,7 +588,7 @@ button {
opacity: 1;
cursor: default;
a {
- color: $secondary;
+ color: $navigation_background;
}
}
@include searching(6px, 26px, #666, 0.9em);
@@ -540,7 +601,7 @@ button {
text-align: center;
&:hover {
background: darken($contrast, 10%);
- color: $secondary;
+ color: $navigation_background;
@include btn-transition;
&.logout{
color: #000000;
@@ -707,4 +768,11 @@ button {
}
}
+div.side-nav-bottom {
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ background-color: $navigation_background;
+}
+
@import "mascot.scss";
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
deleted file mode 100644
index 3c464ed6..00000000
--- a/web-ui/app/style-guide.html
+++ /dev/null
@@ -1,187 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<title>Pixelated Style Guide</title>
-<meta name="description" content="">
-<meta name="viewport" content="width=device-width">
-<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-<link href="css/opensans.css" rel="stylesheet" type="text/css">
-<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/>
-<link href="css/style-guide.css" rel="stylesheet" type="text/css"/>
-<link rel="stylesheet" href="../css/main.css">
-</head>
-<body>
- <div id="style-guide-wrap" data-offcanvas>
- <nav class="top-bar" data-topbar>
- <ul class="left">
- <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li>
- </ul>
-
- <ul class="right">
- <li><a href="#welcome">Home</a></li>
- <li><a href="#colors">Colors</a></li>
- <li><a href="#typography">Typography</a></li>
- <li><a href="#icons">Icons</a></li>
- </ul>
- </nav>
- <section id="welcome" class="guide-section" name="welcome">
- <h2>Welcome to the Pixelated Style Guide</h2>
- <p>
- Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components.
- </p>
- <p>
- This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves.
- </p>
- <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" />
- </section>
- <section id="colors" class="guide-section">
- <h2>Color Palette</h2>
- </br>
- <div class="color-grid">
- <div id="primary-color-card" class="color-card">
- <p class="color-label">
- <span class="color-name">PRIMARY COLOR</span>
- <br>#EF4E2F
- </p>
- </div>
- <div id="secondary-color-card" class="color-card">
- <p class="color-label">
- <span class="color-name">SECONDARY COLOR</span>
- <br>#3E3A37
- </p>
- </div>
- <div id="top-pane-card" class="color-card">
- <p class="color-label">
- <span class="color-name">TOP PANE</span>
- <br>#EAEAEA
- </p>
- </div>
- <div id="contrast-card" class="color-card">
- <p class="color-label">
- <span class="color-name">CONTRAST</span>
- <br>#F2F3ED
- </p>
- </div>
- <div id="action-buttons-card" class="color-card">
- <p class="color-label">
- <span class="color-name">ACTION BUTTONS</span>
- <br>#2ba6cb
- </p>
- </div>
- </div>
- <br>
-
- <div class="color-grid">
- <div id="success-card" class="color-card">
- <p class="color-label">
- <span class="color-name">SUCCESS</span>
- <br>#2DAB49
- </p>
- </div>
- <div id="attention-card" class="color-card">
- <p class="color-label">
- <span class="color-name">ATTENTION</span>
- <br>#F6A40A
- </p>
- </div>
- <div id="warning-card" class="color-card">
- <p class="color-label">
- <span class="color-name">WARNING</span>
- <br>#F7E8AF
- </p>
- </div>
- <div id="error-card" class="color-card">
- <p class="color-label">
- <span class="color-name">ERROR</span>
- <br>#D72A25
- </p>
- </div>
- <div id="search-highlight-card" class="color-card">
- <p class="color-label">
- <span class="color-name">SEARCH HIGHLIGHT</span>
- <br>#FFEF29
- </p>
- </div>
- <div id="count-background-card" class="color-card">
- <p class="color-label">
- <span class="color-name">COUNT BACKGROUND</span>
- <br>#C0B9B9
- </p>
- </div>
- </div>
- </section>
- <section id="typography" class="guide-section">
- <h2>Typography</h2>
-
- </br>
- Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson.
- </br>
- <ul class="typography">
- <li>
- <h2>Aa</h2>
- <span>Regular</span>
- </li>
- <li>
- <h2 class="bold-header">Aa</h2>
- <span>Bold</span>
- </li>
- <li>
- <h2 class="extra-bold-header">Aa</h2>
- <span>Extra Bold</span>
- </li>
- <li>
- <h2 class="lighter-header">Aa</h2>
- <span>Lighter</span>
- </li>
- </ul>
- <ul class="headers-and-sizes">
- <li>
- <h1>Header 1</h1>
- </li>
- <li>
- <h2>Header 2</h2>
- </li>
- <li>
- <h3>Header 3</h3>
- </li>
- <li>
- <h4>Header 4</h4>
- </li>
- <li>
- <h5>Header 5</h5>
- </li>
- <li>
- <h6>Header 6</h6>
- </li>
- <li>
- <i>Italics</i><br>
- </li>
- <li>
- <strong>Strong / Emphasized</strong><br>
- </li>
- <li>
- <small>Small Text</small>
- </li>
- </ul>
- </section>
- <section id="icons" class="guide-section" name="icons">
- <h2>Icons</h2>
- <p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a>
- <p>Here are some of the icons we're currently using on Pixelated</p>
- <i class="fa fa-inbox"></i>
- <i class="fa fa-send"></i>
- <i class="fa fa-pencil"></i>
- <i class="fa fa-trash-o"></i>
- <i class="fa fa-archive"></i>
- <i class="fa fa-tags"></i>
- <i class="fa fa-navicon"></i>
- <i class="fa fa-refresh"></i>
- </section>
- </div>
-
-<script src="/bower_components/jquery/dist/jquery.js"></script>
-<script src="/js/style_guide/main.js"></script>
-</body>
-</html>
diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs
index 5df67513..ca397b9a 100644
--- a/web-ui/app/templates/tags/tag.hbs
+++ b/web-ui/app/templates/tags/tag.hbs
@@ -1,3 +1,3 @@
-<li id="tag-{{ ident }}" class="{{ selected }}">
+<li id="tag-{{ ident }}" class="custom-tag {{ selected }}">
<span class="tag-label">{{> tag_inner }}</span>
</li>
diff --git a/web-ui/app/templates/tags/tag_list.hbs b/web-ui/app/templates/tags/tag_list.hbs
index e2e97833..e265354f 100644
--- a/web-ui/app/templates/tags/tag_list.hbs
+++ b/web-ui/app/templates/tags/tag_list.hbs
@@ -1,3 +1,6 @@
<ul id="default-tag-list"></ul>
-<h3>{{t 'Tags'}}</h3>
-<ul id="custom-tag-list"></ul>
+<div class="tags-icon side-nav-toggle">
+ <i class="fa fa-tags"></i>
+ <span class="tag-label">Tags</span>
+</div>
+<ul id="custom-tag-list"></ul> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-28 18:43:55 +0000