summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web-ui/app/images/pixelated-logo-orange.svg28
-rw-r--r--web-ui/app/images/pixelated-logo_symbol_orange.svg9
-rw-r--r--web-ui/app/index.html43
-rw-r--r--web-ui/app/js/tags/ui/tag.js47
-rw-r--r--web-ui/app/js/tags/ui/tag_list.js16
-rw-r--r--web-ui/app/js/tags/ui/tag_shortcut.js85
-rw-r--r--web-ui/app/scss/_mixins.scss2
-rw-r--r--web-ui/app/scss/_read.scss2
-rw-r--r--web-ui/app/scss/styles.scss185
-rw-r--r--web-ui/app/templates/mails/full_view.hbs6
-rw-r--r--web-ui/app/templates/page/logout.hbs8
-rw-r--r--web-ui/app/templates/tags/tag.hbs2
-rw-r--r--web-ui/test/spec/tags/ui/tag_list.spec.js16
-rw-r--r--web-ui/test/spec/tags/ui/tag_shortcut.spec.js57
14 files changed, 213 insertions, 293 deletions
diff --git a/web-ui/app/images/pixelated-logo-orange.svg b/web-ui/app/images/pixelated-logo-orange.svg
new file mode 100644
index 00000000..7b141531
--- /dev/null
+++ b/web-ui/app/images/pixelated-logo-orange.svg
@@ -0,0 +1,28 @@
+<?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.svg b/web-ui/app/images/pixelated-logo_symbol_orange.svg
deleted file mode 100644
index df48c83b..00000000
--- a/web-ui/app/images/pixelated-logo_symbol_orange.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="55.918px" height="63.38px" viewBox="0 0 55.918 63.38" enable-background="new 0 0 55.918 63.38" xml:space="preserve">
-<path fill="#F9A731" d="M0,15.782v31.755L27.96,63.38l27.958-15.843V15.782L27.949,0L0,15.782z M26.814,51.89l-16.254-9.025V23.343
- l16.279,9.344L26.814,51.89z M45.357,42.864L29.272,51.89l0.03-19.188l16.055-9.359V42.864z M45.357,20.664L28.011,30.948
- l-17.45-10.284l17.45-9.402L45.357,20.664z"/>
-</svg>
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 33b54b85..87ab000d 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -17,38 +17,31 @@
<body>
-<div class="off-canvas-wrap" data-offcanvas>
- <header id="main" >
- <div id="user-alerts" class="message-panel"></div>
- <div id="loading" class="message-panel"><span>Loading...</span></div>
- </header>
-
+<div class="off-canvas-wrap move-right menu" data-offcanvas>
<div class="inner-wrap">
- <div id="menu" class="column collapsed-nav no-padding">
+ <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_symbol_orange.png" alt="Pixelated">
+ <img id="pixelated-logo" src="/assets/images/pixelated-logo-orange.svg" alt="Pixelated">
</a>
- <a class="left-off-canvas-toggle" href="#">
+ <a class="fake-left-off-canvas-toggle" href="#">
<i class=" toggle fa fa-navicon"></i>
</a>
- <ul id="tags-shortcuts" class="shortcuts">
- </ul>
- <ul id="custom-tags-shortcuts" class="shortcuts">
- <li>
- <a class="left-off-canvas-toggle" href="#"><i class="fa fa-tags"></i><div class="shortcut-label">Tags</div></a>
- </li>
- </ul>
- <ul id="logout-shortcut" class="shortcuts">
- </ul>
- <a class="exit-off-canvas"></a>
- </div>
-
- <section id="left-pane" class="left-off-canvas-menu">
<nav id="tag-list"></nav>
<nav id="logout"></nav>
</section>
+ </div>
+</div>
+<div class="off-canvas-wrap content" data-offcanvas>
+ <header id="main" >
+ <div id="user-alerts" class="message-panel"></div>
+ <div id="loading" class="message-panel"><span>Loading...</span></div>
+ </header>
+
+ <div class="inner-wrap">
<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">
@@ -92,6 +85,12 @@
$(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/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js
index a41310e8..ba6dfe61 100644
--- a/web-ui/app/js/tags/ui/tag.js
+++ b/web-ui/app/js/tags/ui/tag.js
@@ -19,15 +19,14 @@ define(
[
'flight/lib/component',
'views/templates',
- 'tags/ui/tag_base',
'page/events',
'views/i18n'
],
- function (defineComponent, templates, tagBase, events, i18n) {
+ function (defineComponent, templates, events, i18n) {
'use strict';
- var Tag = defineComponent(tag, tagBase);
+ var Tag = defineComponent(tag);
Tag.appendedTo = function (parent, data) {
var res = new this();
@@ -39,6 +38,44 @@ define(
function tag() {
+ var ALWAYS_HIDE_BADGE_FOR = ['sent', 'trash', 'all'];
+ var TOTAL_BADGE = ['drafts'];
+
+ this.displayBadge = function(tag) {
+ if(_.include(ALWAYS_HIDE_BADGE_FOR, tag.name)) { return false; }
+ if(this.badgeType(tag) === 'total') {
+ return tag.counts.total > 0;
+ } else {
+ return (tag.counts.total - tag.counts.read) > 0;
+ }
+ };
+
+ this.badgeType = function(tag) {
+ return _.include(TOTAL_BADGE, tag.name) ? 'total' : 'unread';
+ };
+
+ this.doUnselect = function () {
+ this.$node.removeClass('selected');
+ };
+
+ this.doSelect = function () {
+ this.$node.addClass('selected');
+ };
+
+ this.selectTag = function (ev, data) {
+ this.attr.currentTag = data.tag;
+ if (data.tag === this.attr.tag.name) {
+ this.doSelect();
+ }
+ else {
+ this.doUnselect();
+ }
+ };
+
+ this.selectTagAll = function () {
+ this.selectTag(null, {tag: 'all'});
+ };
+
this.viewFor = function (tag, template, currentTag) {
return template({
tagName: tag.default ? i18n('tags.' + tag.name) : tag.name,
@@ -100,6 +137,10 @@ define(
this.on(document, events.mail.read, this.decreaseReadCountIfMatchingTag);
this.on(document, events.search.perform, this.addSearchingClass);
this.on(document, events.search.empty, this.removeSearchingClass);
+
+ this.on(document, events.ui.tag.select, this.selectTag);
+ this.on(document, events.search.perform, this.selectTagAll);
+ this.on(document, events.search.empty, this.selectTagAll);
});
this.renderAndAttach = function (parent, data) {
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js
index 0c483abb..a2172c6d 100644
--- a/web-ui/app/js/tags/ui/tag_list.js
+++ b/web-ui/app/js/tags/ui/tag_list.js
@@ -20,11 +20,10 @@ define(
'tags/ui/tag',
'views/templates',
'page/events',
- 'tags/ui/tag_shortcut',
'page/router/url_params'
],
- function(defineComponent, Tag, templates, events, TagShortcut, urlParams) {
+ function(defineComponent, Tag, templates, events, urlParams) {
'use strict';
var ICON_FOR = {
@@ -55,17 +54,10 @@ define(
customTagList: '#custom-tag-list'
});
- this.renderShortcut = function (tag, tagComponent) {
- return TagShortcut.appendedTo($('#tags-shortcuts'), { tag: tag, trigger: tagComponent, currentTag: this.getCurrentTag()});
- };
-
function renderTag(tag, defaultList, customList) {
var list = tag.default ? defaultList : customList;
var tagComponent = Tag.appendedTo(list, {tag: tag, currentTag: this.getCurrentTag()});
- if (_.contains(_.keys(ORDER), tag.name)) {
- tagComponent.attr.shortcut = this.renderShortcut(tag, tagComponent);
- }
}
function resetTagList(lists) {
@@ -76,17 +68,11 @@ define(
}
- this.resetShortcuts = function () {
- $('#tags-shortcuts').empty();
- this.trigger(document, events.tags.shortcuts.teardown);
- };
-
this.renderTagList = function(tags) {
var defaultList = this.select('defaultTagList');
var customList = this.select('customTagList');
resetTagList.call(this, [defaultList, customList]);
- this.resetShortcuts();
tags.forEach(function (tag) {
renderTag.call(this, tag, defaultList, customList);
diff --git a/web-ui/app/js/tags/ui/tag_shortcut.js b/web-ui/app/js/tags/ui/tag_shortcut.js
deleted file mode 100644
index b5b76825..00000000
--- a/web-ui/app/js/tags/ui/tag_shortcut.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (c) 2014 ThoughtWorks, Inc.
- *
- * Pixelated is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Pixelated is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
- */
-'use strict';
-define(
- [
- 'flight/lib/component',
- 'views/templates',
- 'page/events',
- 'tags/ui/tag_base',
- 'flight/lib/utils'
- ],
-
- function (describeComponent, templates, events, tagBase, utils) {
-
- var TagShortcut = describeComponent(tagShortcut, tagBase);
-
- TagShortcut.appendedTo = function (parent, data) {
- var res = new this();
- res.renderAndAttach(parent, data);
- return res;
- };
-
- return TagShortcut;
-
- function tagShortcut() {
-
- this.renderTemplate = function (tag, currentTag) {
- var model = {
- tagName: tag.name,
- displayBadge: this.displayBadge(tag),
- badgeType: this.badgeType(tag),
- count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
- icon: iconFor[tag.name],
- selected: tag.name === currentTag ? 'selected' : ''
- };
- return templates.tags.shortcut(model);
- };
-
- this.renderAndAttach = function (parent, options) {
- parent.append(this.renderTemplate(options.tag, options.currentTag));
- this.initialize(parent.children().last(), options);
- };
-
- this.reRender = function () {
- this.$node.html(this.renderTemplate(this.attr.tag, this.attr.currentTag));
- };
-
- var iconFor = {
- 'inbox': 'inbox',
- 'sent': 'send',
- 'drafts': 'pencil',
- 'trash': 'trash-o',
- 'all': 'archive'
- };
-
- this.doTeardown = function () {
- if (!jQuery.contains(document, this.$node[0])) {
- this.teardown();
- }
- };
-
- this.after('initialize', function () {
- this.on('click', function () {
- this.attr.trigger.triggerSelect();
- });
- this.on(document, events.tags.shortcuts.teardown, this.doTeardown);
- });
-
- }
- }
-);
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 18871995..2d1f8f23 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -104,7 +104,7 @@
background: transparent;
border: 1px solid #DDD;
line-height: 0;
- padding: 1px 2px;
+ padding: 3px 2px 2px 2px;
@include border-radius(2px);
&:hover {
opacity: 1;
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 332a76fc..bd30552c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -6,8 +6,6 @@
display: flex;
flex-wrap: nowrap;
- position: fixed;
- width: 57%;
top: 0;
z-index: 10;
background-color: white;
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index e5556f2f..9846d326 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -116,7 +116,7 @@
margin: -3px 0 0 0;
li {
background-color: #DDD;
- color: black;
+ color: black;
display: inline-block;
height: auto;
font-weight: 400;
@@ -173,13 +173,10 @@
font-size: 0.7em;
margin-left: 5px;
font-weight: 700;
+ position: relative;
@include border-radius(100px);
}
-article {
- padding-left: 50px !important;
-}
-
section {
display: inline-block;
vertical-align: top;
@@ -253,9 +250,8 @@ section {
background-color: $secondary;
color: white;
nav {
- padding-bottom: 25px;
border-right: 1px solid lighten($secondary, 10%);
- ul#default-tag-list, #custom-tag-list, #logout {
+ ul#default-tag-list, #custom-tag-list {
li {
transition: background-color 150ms ease-out;
padding: 2px 10px;
@@ -273,15 +269,33 @@ section {
}
ul#default-tag-list {
+ .unread-count, .total-count {
+ font-size: 0.7em;
+ padding: 0px 5px 0;
+ top: 1px;
+ left: 0;
+ border: 1px solid #FFF;
+ position: absolute;
+ opacity: 0.95;
+ }
+ .total-count {
+ background: #999;
+ }
+ span.tag-label {
+ padding-left: 2px;
+ }
li {
- padding: 5px 10px;
+ padding: 5px 10px 5px 16px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:before {
+ font-size: 1.5em;
font-family: "FontAwesome";
- margin-right: 10px;
+ margin-right: 13px;
font-weight: normal;
+ position: relative;
+ top: 2px;
}
&:nth-child(1) {
&:before {
@@ -312,28 +326,41 @@ section {
}
ul#custom-tag-list {
- padding-bottom: 30px;
li {
+ white-space: nowrap;
+ overflow: hidden;
font-size: 0.8em;
- padding: 5px 20px;
+ padding: 5px 10px 5px 15px;
+
+ span.tag-label {
+ padding: 5px 20px 5px 38px;
+ }
}
}
- ul#logout {
- a {
- color: #000000;
- }
+ ul#logout {
li {
- color: #000000;
- background-color: $action_buttons;
+ color: $action_buttons;
+ background-color: $secondary;
padding: 5px 10px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
- &:before {
- font-family: "FontAwesome";
- margin-right: 10px;
- font-weight: normal;
+ &:hover {
+ background-color: $action_buttons;
+ color: $secondary;
+ }
+
+ div {
+ padding-left: 7px;
+ &:before {
+ font-size: 1.5em;
+ font-family: "FontAwesome";
+ margin-right: 13px;
+ font-weight: normal;
+ position: relative;
+ top: 2px;
+ }
}
}
}
@@ -463,6 +490,31 @@ button {
}
}
+.fake-left-off-canvas-toggle {
+ color: white;
+
+ &:hover, &:focus {
+ color: white;
+ }
+
+ padding: 9px 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;
+ }
+}
+
.collapsed-nav {
width: 50px;
position: absolute;
@@ -470,31 +522,6 @@ button {
height: 100vh;
background: $secondary;
- .left-off-canvas-logo {
- text-align: center;
- padding: 8px;
- display: block;
-
- img {
- padding-top: 1px;
- }
- }
-
- .left-off-canvas-toggle {
- color: white;
- text-align: center;
- display: block;
- left: 0;
- padding: 9px;
- background: $secondary;
- top: 0;
- z-index: 10000;
- position: relative;
- &.logout {
- color: $action_buttons;
- }
- }
-
ul.shortcuts {
li {
position: relative;
@@ -572,51 +599,56 @@ button {
bottom: 0;
position: absolute;
overflow-y: auto;
- z-index: 1001;
- transition: transform 500ms ease 0s;
- -webkit-overflow-scrolling: touch;
- -ms-transform: translate(-100%, 0);
- -webkit-transform: translate3d(-100%, 0, 0);
- -moz-transform: translate3d(-100%, 0, 0);
- -ms-transform: translate3d(-100%, 0, 0);
- -o-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
}
+
.left-off-canvas-menu * {
--webkit-backface-visibility: hidden; }
+ -webkit-backface-visibility: hidden;
+}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-overflow: hidden; }
+ overflow: hidden;
+}
+
.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
min-height: 100%;
--webkit-overflow-scrolling: touch; }
+ -webkit-overflow-scrolling: touch;
+}
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
+}
+
+.inner-wrap:before, .inner-wrap:after {
+ content: " ";
+ display: table;
+}
+
+.inner-wrap:after {
+ clear: both;
+}
+
+.off-canvas-wrap.content {
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
-transition: transform 500ms ease; }
-.inner-wrap:before, .inner-wrap:after {
- content: " ";
-display: table; }
-.inner-wrap:after {
-clear: both; }
-
-.move-right > .inner-wrap {
- -ms-transform: translate(13.88889rem, 0);
- -webkit-transform: translate3d(13.88889rem, 0, 0);
- -moz-transform: translate3d(13.88889rem, 0, 0);
- -ms-transform: translate3d(13.88889rem, 0, 0);
- -o-transform: translate3d(13.88889rem, 0, 0);
-transform: translate3d(13.88889rem, 0, 0); }
+ transition: transform 500ms ease;
+
+ &.move-right {
+ -webkit-transform: translate3d(10rem, 0, 0);
+ -moz-transform: translate3d(10rem, 0, 0);
+ -ms-transform: translate3d(10rem, 0, 0);
+ -o-transform: translate3d(10rem, 0, 0);
+ transform: translate3d(10rem, 0, 0);
+ }
+}
+
.move-right .exit-off-canvas {
-webkit-backface-visibility: hidden;
transition: background 300ms ease;
@@ -634,6 +666,15 @@ transform: translate3d(13.88889rem, 0, 0); }
.move-right .exit-off-canvas:hover {
background: rgba(255, 255, 255, 0.05); } }
+.off-canvas-wrap.move-right.menu {
+ position: absolute;
+}
+
+.off-canvas-wrap.content {
+ left: 50px;
+ padding-right: 50px;
+}
+
.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
-ms-transform: none;
-webkit-transform: none;
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index d05537f3..c72b3af9 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -81,9 +81,3 @@
</div>
{{/if}}
</div>
-<script>
- (function () {
- var height = $(".msg-header")[0].offsetHeight;
- $(".bodyArea")[0].style.marginTop = height + 'px';
- }());
-</script>
diff --git a/web-ui/app/templates/page/logout.hbs b/web-ui/app/templates/page/logout.hbs
index a17b3b7e..dd931274 100644
--- a/web-ui/app/templates/page/logout.hbs
+++ b/web-ui/app/templates/page/logout.hbs
@@ -1,8 +1,8 @@
<ul id="logout">
- <li>
- <a title="logout" href={{logout_url}}>
+ <a title="logout" href={{logout_url}}>
+ <li>
<div class="fa fa-sign-out"></div>
<i class="shortcut-label"></i> Logout
- </a>
- </li>
+ </li>
+ </a>
</ul>
diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs
index a7b02e21..5df67513 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 }}">
- {{> tag_inner }}
+ <span class="tag-label">{{> tag_inner }}</span>
</li>
diff --git a/web-ui/test/spec/tags/ui/tag_list.spec.js b/web-ui/test/spec/tags/ui/tag_list.spec.js
index 9391a30a..f92f72af 100644
--- a/web-ui/test/spec/tags/ui/tag_list.spec.js
+++ b/web-ui/test/spec/tags/ui/tag_list.spec.js
@@ -80,30 +80,14 @@ describeComponent('tags/ui/tag_list', function () {
expect(defaultTags).toEqual(['tag-2']);
});
- it('resets the tag shortcuts when loading tags', function () {
- var tagList = [tag('inbox', 1, true)];
- $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
-
- tagList = [tag('sent', 1, true)];
- $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
-
- var shortcuts = _.map($('#tags-shortcuts').find('li'), function (el) {
- return $(el).text().trim();
- });
-
- expect(shortcuts).toEqual(['sent']);
- });
-
it('sends teardown events when loading new tags', function () {
var tagsTeardownCustom = spyOnEvent(this.component.select('customTagList'), Pixelated.events.tags.teardown);
var tagsTeardownDefault = spyOnEvent(this.component.select('defaultTagList'), Pixelated.events.tags.teardown);
- var tagsShortcutsTeardown = spyOnEvent(document, Pixelated.events.tags.shortcuts.teardown);
$(document).trigger(Pixelated.events.tags.received, {tags: []});
expect(tagsTeardownCustom).toHaveBeenTriggeredOn(this.component.select('customTagList'));
expect(tagsTeardownDefault).toHaveBeenTriggeredOn(this.component.select('defaultTagList'));
- expect(tagsShortcutsTeardown).toHaveBeenTriggeredOn(document);
});
});
});
diff --git a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
deleted file mode 100644
index fe235541..00000000
--- a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* global jasmine */
-/* global Pixelated */
-
-describeComponent('tags/ui/tag_shortcut', function () {
- 'use strict';
-
- var parent, shortcut, component, TagShortcut;
-
- beforeEach(function () {
- TagShortcut = require('tags/ui/tag_shortcut');
-
- component = jasmine.createSpyObj('tagComponent', ['triggerSelect']);
- parent = $('<ul>');
- $('body').append(parent);
- shortcut = TagShortcut.appendedTo(parent, { tag: { name: 'inbox', counts: { total: 15 }}, trigger: component });
- });
-
- afterEach(function () {
- $('body')[0].removeChild(parent[0]);
- });
-
- it('renders the shortcut inside the parent', function () {
- expect(parent.html()).toMatch('<i class="fa fa-inbox"></i>');
- expect(parent.html()).toMatch('<div class="shortcut-label">inbox</div>');
- });
-
- it('selects and unselect on tag.select', function () {
- $(document).trigger(Pixelated.events.ui.tag.select, { tag: 'inbox'});
-
- expect(shortcut.$node).toHaveClass('selected');
-
- $(document).trigger(Pixelated.events.ui.tag.select, { tag: 'sent'});
-
- expect(shortcut.$node).not.toHaveClass('selected');
- });
-
- it('delegates the click to linked tag', function (){
- shortcut.$node.click();
-
- expect(component.triggerSelect).toHaveBeenCalled();
- });
-
- it('teardown shortcuts on event but only if they are not in the DOM', function () {
- parent.empty();
- var shortcutAddedAfterEmptyingParent = TagShortcut.appendedTo(parent, { tag: { name: 'inbox', counts: { total: 15 }}, trigger: component });
- // by now shorcut is not in the DOM anymore but shortcutAddedAfterEmptyingParent is
-
- spyOn(shortcut, 'teardown').and.callThrough();
- spyOn(shortcutAddedAfterEmptyingParent, 'teardown').and.callThrough();
-
- $(document).trigger(Pixelated.events.tags.shortcuts.teardown);
-
- expect(shortcut.teardown).toHaveBeenCalled();
- expect(shortcutAddedAfterEmptyingParent.teardown).not.toHaveBeenCalled();
- });
-});
-
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-11 18:42:49 +0000