From 518856ed261ba3bdd1270dff45151db967c72434 Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 10 Feb 2015 17:23:07 -0200 Subject: #239 make sidenav always partially visible --- web-ui/app/index.html | 16 ++++++++++------ web-ui/app/scss/styles.scss | 32 +++++++++++++++++++++----------- 2 files changed, 31 insertions(+), 17 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 33b54b85..84d70a2a 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -17,13 +17,22 @@ +
+
+
+ + +
+
+
+
Loading...
-
+
-
- - -
-
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index e5556f2f..c3da4604 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -572,15 +572,6 @@ 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; } @@ -610,13 +601,15 @@ display: table; } .inner-wrap:after { clear: both; } -.move-right > .inner-wrap { +.off-canvas-wrap.move-right > .inner-wrap.content { -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); } + transform: translate3d(13.88889rem, 0, 0); +} + .move-right .exit-off-canvas { -webkit-backface-visibility: hidden; transition: background 300ms ease; @@ -634,6 +627,23 @@ 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.move-right.menu > .inner-wrap.content { + transform: translate3d(0, 0, 0); +} + +.off-canvas-wrap .inner-wrap.content { + -ms-transform: translate(75px, 0); + -webkit-transform: translate3d(75px, 0, 0); + -moz-transform: translate3d(75px, 0, 0); + -ms-transform: translate3d(75px, 0, 0); + -o-transform: translate3d(75px, 0, 0); + transform: translate3d(75px, 0, 0); +} + .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { -ms-transform: none; -webkit-transform: none; -- cgit v1.2.3 From 88c5ddd2f3af1a5a38c9a501543363aba00323c0 Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 10 Feb 2015 17:32:14 -0200 Subject: #239 Remove tags shortcuts --- web-ui/app/index.html | 10 ---------- web-ui/app/js/tags/ui/tag_list.js | 3 --- web-ui/test/spec/tags/ui/tag_list.spec.js | 16 ---------------- 3 files changed, 29 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 84d70a2a..a60fbb61 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -40,16 +40,6 @@ -
    -
- -
    -
-
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js index 0c483abb..c9a66722 100644 --- a/web-ui/app/js/tags/ui/tag_list.js +++ b/web-ui/app/js/tags/ui/tag_list.js @@ -63,9 +63,6 @@ define( 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) { 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); }); }); }); -- cgit v1.2.3 From fa3e2ba6d928817f749431853142ae824b72eb82 Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 10 Feb 2015 17:55:15 -0200 Subject: #239 Move toggle to sidebar nav (with js hack) --- web-ui/app/index.html | 27 +++++++++++++-------- web-ui/app/scss/styles.scss | 57 +++++++++++++++++++++------------------------ 2 files changed, 44 insertions(+), 40 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index a60fbb61..5a6d31f0 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -19,27 +19,29 @@
-
- - -
-
+
+ + + + + +
+
-
+
Loading...
-
+
@@ -86,6 +88,11 @@ $(document).foundation(); + diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index c3da4604..cd149b9f 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -463,6 +463,23 @@ button { } } +.fake-left-off-canvas-toggle { + color: white; + &:hover, &:focus { + color: white; + } + display: block; + left: 0; + padding: 9px; + background: $secondary; + top: 0; + z-index: 10000; + position: relative; + &.logout { + color: $action_buttons; + } +} + .collapsed-nav { width: 50px; position: absolute; @@ -478,21 +495,6 @@ button { 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 { @@ -601,13 +603,13 @@ display: table; } .inner-wrap:after { clear: both; } -.off-canvas-wrap.move-right > .inner-wrap.content { - -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); +.off-canvas-wrap.move-right.content > .inner-wrap { + -ms-transform: translate(9rem, 0); + -webkit-transform: translate3d(9rem, 0, 0); + -moz-transform: translate3d(9rem, 0, 0); + -ms-transform: translate3d(9rem, 0, 0); + -o-transform: translate3d(9rem, 0, 0); + transform: translate3d(9rem, 0, 0); } .move-right .exit-off-canvas { @@ -631,17 +633,12 @@ background: rgba(255, 255, 255, 0.05); } } position: absolute; } -.off-canvas-wrap.move-right.menu > .inner-wrap.content { +.off-canvas-wrap.move-right.menu > .inner-wrap { transform: translate3d(0, 0, 0); } -.off-canvas-wrap .inner-wrap.content { - -ms-transform: translate(75px, 0); - -webkit-transform: translate3d(75px, 0, 0); - -moz-transform: translate3d(75px, 0, 0); - -ms-transform: translate3d(75px, 0, 0); - -o-transform: translate3d(75px, 0, 0); - transform: translate3d(75px, 0, 0); +.off-canvas-wrap.content { + left: 75px; } .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { -- cgit v1.2.3 From 4b481505ccf1686bddce67c4c6a4d74cdf4426b9 Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 10 Feb 2015 18:14:45 -0200 Subject: #239 Move logo to sidebar nav --- web-ui/app/index.html | 6 +++--- web-ui/app/scss/styles.scss | 17 +++++++---------- 2 files changed, 10 insertions(+), 13 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 5a6d31f0..b13ee206 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -20,6 +20,9 @@
+ @@ -39,9 +42,6 @@
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index cd149b9f..d56f8d34 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -480,6 +480,13 @@ button { } } +.left-off-canvas-logo { + img { + padding: 4px 0 0 4px; + width: 36px; + } +} + .collapsed-nav { width: 50px; position: absolute; @@ -487,16 +494,6 @@ button { height: 100vh; background: $secondary; - .left-off-canvas-logo { - text-align: center; - padding: 8px; - display: block; - - img { - padding-top: 1px; - } - } - ul.shortcuts { li { position: relative; -- cgit v1.2.3 From f6058e41e162ce555bca370ba0156d7698ed5f7d Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 10 Feb 2015 18:35:01 -0200 Subject: #239 Remove old shortcut bar --- web-ui/app/index.html | 5 +---- web-ui/app/scss/styles.scss | 19 ++++++++----------- 2 files changed, 9 insertions(+), 15 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index b13ee206..04581bf0 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -39,12 +39,9 @@
- - -
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index d56f8d34..58dde962 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -176,10 +176,6 @@ @include border-radius(100px); } -article { - padding-left: 50px !important; -} - section { display: inline-block; vertical-align: top; @@ -601,12 +597,12 @@ display: table; } clear: both; } .off-canvas-wrap.move-right.content > .inner-wrap { - -ms-transform: translate(9rem, 0); - -webkit-transform: translate3d(9rem, 0, 0); - -moz-transform: translate3d(9rem, 0, 0); - -ms-transform: translate3d(9rem, 0, 0); - -o-transform: translate3d(9rem, 0, 0); - transform: translate3d(9rem, 0, 0); + -ms-transform: translate(6rem, 0); + -webkit-transform: translate3d(6rem, 0, 0); + -moz-transform: translate3d(6rem, 0, 0); + -ms-transform: translate3d(6rem, 0, 0); + -o-transform: translate3d(6rem, 0, 0); + transform: translate3d(6rem, 0, 0); } .move-right .exit-off-canvas { @@ -635,7 +631,8 @@ background: rgba(255, 255, 255, 0.05); } } } .off-canvas-wrap.content { - left: 75px; + left: 50px; + padding-right: 50px; } .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { -- cgit v1.2.3 From c067c47f34328a9e0971263cf1c77b0d4559e0c3 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 11 Feb 2015 16:26:46 -0200 Subject: #239 Adding full logo and styling it --- web-ui/app/images/pixelated-logo-orange.svg | 28 ++++++++++++++++++++++ web-ui/app/images/pixelated-logo_symbol_orange.svg | 9 ------- web-ui/app/index.html | 2 +- web-ui/app/scss/styles.scss | 4 ++-- 4 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 web-ui/app/images/pixelated-logo-orange.svg delete mode 100644 web-ui/app/images/pixelated-logo_symbol_orange.svg (limited to 'web-ui') 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 @@ + + + + + + + + + + + + + + + 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 @@ - - - - - - diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 04581bf0..b4fc999b 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -21,7 +21,7 @@
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 58dde962..41d78d3b 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -478,8 +478,8 @@ button { .left-off-canvas-logo { img { - padding: 4px 0 0 4px; - width: 36px; + padding: 9px 6px 6px 6px; + width: 163px; } } -- cgit v1.2.3 From 71281c87f8750e7fd2db90aa5b83d2865d35768d Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Thu, 12 Feb 2015 12:47:05 -0200 Subject: #239 Fixing tag display and menu expansion slide width --- web-ui/app/scss/styles.scss | 21 ++++++++++++--------- web-ui/app/templates/tags/tag.hbs | 2 +- 2 files changed, 13 insertions(+), 10 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 41d78d3b..c44b07c9 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -270,13 +270,14 @@ section { ul#default-tag-list { li { - padding: 5px 10px; + padding: 5px 10px 5px 15px; 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; } &:nth-child(1) { @@ -461,12 +462,14 @@ button { .fake-left-off-canvas-toggle { color: white; + &:hover, &:focus { color: white; } + + padding: 9px 0px 8px 19px; display: block; left: 0; - padding: 9px; background: $secondary; top: 0; z-index: 10000; @@ -597,12 +600,12 @@ display: table; } clear: both; } .off-canvas-wrap.move-right.content > .inner-wrap { - -ms-transform: translate(6rem, 0); - -webkit-transform: translate3d(6rem, 0, 0); - -moz-transform: translate3d(6rem, 0, 0); - -ms-transform: translate3d(6rem, 0, 0); - -o-transform: translate3d(6rem, 0, 0); - transform: translate3d(6rem, 0, 0); + -ms-transform: translate(10rem, 0); + -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 { diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs index a7b02e21..0d21cfde 100644 --- a/web-ui/app/templates/tags/tag.hbs +++ b/web-ui/app/templates/tags/tag.hbs @@ -1,3 +1,3 @@
  • - {{> tag_inner }} + {{> tag_inner }}
    • -- cgit v1.2.3 From 1e42c85ed0e0af4181dfe1b66d1c6445975bea10 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Thu, 12 Feb 2015 16:25:22 -0200 Subject: #239 Adding extra padding to tag labels --- web-ui/app/scss/styles.scss | 8 ++++++-- web-ui/app/templates/tags/tag.hbs | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index c44b07c9..dee4f388 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -270,7 +270,7 @@ section { ul#default-tag-list { li { - padding: 5px 10px 5px 15px; + padding: 5px 10px 5px 16px; position: relative; @include searching(4px, 19px, #333, 0.7em); @@ -312,7 +312,11 @@ section { padding-bottom: 30px; li { font-size: 0.8em; - padding: 5px 20px; + padding: 5px 10px 5px 15px; + + span { + padding: 5px 20px 5px 38px; + } } } diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs index 0d21cfde..5df67513 100644 --- a/web-ui/app/templates/tags/tag.hbs +++ b/web-ui/app/templates/tags/tag.hbs @@ -1,3 +1,3 @@
  • - {{> tag_inner }} + {{> tag_inner }}
    • -- cgit v1.2.3 From 356734f2fb0f70910c3e085eb0ebcc72e191fdde Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Wed, 11 Feb 2015 17:06:33 -0200 Subject: #239 remove deprecated tag shortcut code --- web-ui/app/js/tags/ui/tag_list.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js index c9a66722..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,10 +54,6 @@ 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; @@ -73,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); -- cgit v1.2.3 From c29cca2228684a1e3e2424b4d672c0e6ff10ebbe Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Thu, 12 Feb 2015 16:45:02 -0200 Subject: #239 move the correct div to allow the whole area of a tag to be clickable --- web-ui/app/scss/styles.scss | 55 +++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 24 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index dee4f388..18ab92d4 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; @@ -466,7 +466,7 @@ button { .fake-left-off-canvas-toggle { color: white; - + &:hover, &:focus { color: white; } @@ -476,7 +476,6 @@ button { left: 0; background: $secondary; top: 0; - z-index: 10000; position: relative; &.logout { color: $action_buttons; @@ -575,41 +574,53 @@ button { position: absolute; overflow-y: auto; } + .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; } - -.off-canvas-wrap.move-right.content > .inner-wrap { - -ms-transform: translate(10rem, 0); - -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); + 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 { @@ -633,10 +644,6 @@ background: rgba(255, 255, 255, 0.05); } } position: absolute; } -.off-canvas-wrap.move-right.menu > .inner-wrap { - transform: translate3d(0, 0, 0); -} - .off-canvas-wrap.content { left: 50px; padding-right: 50px; -- cgit v1.2.3 From 8e2143bce8c05d1e7ad6e9fbb4052b80ef49da9d Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Fri, 13 Feb 2015 17:44:17 -0200 Subject: #239 Avoid pushing window state when clicking the menu sandwich --- web-ui/app/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index b4fc999b..87ab000d 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -86,7 +86,8 @@ $(document).foundation(); -- cgit v1.2.3 From 63f74d2d9bcc85cff2fea92e80f49774bef5e6bf Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Fri, 13 Feb 2015 17:49:46 -0200 Subject: #239 Remove deprecated code of tag shortcuts --- web-ui/app/js/tags/ui/tag.js | 47 ++++++++++++++- web-ui/app/js/tags/ui/tag_shortcut.js | 85 --------------------------- web-ui/test/spec/tags/ui/tag_shortcut.spec.js | 57 ------------------ 3 files changed, 44 insertions(+), 145 deletions(-) delete mode 100644 web-ui/app/js/tags/ui/tag_shortcut.js delete mode 100644 web-ui/test/spec/tags/ui/tag_shortcut.spec.js (limited to 'web-ui') 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_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 . - */ -'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/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 = $('
      '); - $('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(''); - expect(parent.html()).toMatch('
      inbox
      '); - }); - - 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(); - }); -}); - -- cgit v1.2.3 From 5167d58988b80df912e391f7ef3044494f3263eb Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 18 Feb 2015 12:23:22 -0200 Subject: #239 Adding some extra padding to the tag list so larger types won't break the interaction --- web-ui/app/scss/styles.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 18ab92d4..b72fe73f 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -269,6 +269,9 @@ section { } ul#default-tag-list { + span { + padding-left: 2px; + } li { padding: 5px 10px 5px 16px; position: relative; -- cgit v1.2.3 From d576f2362624597993257bf8a6749e1150ee5753 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 18 Feb 2015 16:17:05 -0200 Subject: #239 Fixing message header issue on chrome (and hopefully not introducing new ones :) --- web-ui/app/scss/_read.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'web-ui') 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; -- cgit v1.2.3 From 90f4555ff85bd802f678805068f1776b6804a242 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 18 Feb 2015 16:45:48 -0200 Subject: #239 Removing function that dynamically sets a margin-top to the full email view body according to the message header size. This *should* work as the message header is no longer fixed (position:fixed) --- web-ui/app/templates/mails/full_view.hbs | 6 ------ 1 file changed, 6 deletions(-) (limited to 'web-ui') 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 @@
    {{/if}}
    - -- cgit v1.2.3 From 06796d31187ef3bb9da73a8674ecf1cb887db685 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 18 Feb 2015 18:20:19 -0200 Subject: Fixing padding around 'add new tag' plus sign --- web-ui/app/scss/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web-ui') 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; -- cgit v1.2.3 From 46de90deddd264dc8c301916e3f139d74bbbcc76 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Wed, 18 Feb 2015 23:24:54 -0200 Subject: #239 Aligning default tag icons with their respective labels --- web-ui/app/scss/styles.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index b72fe73f..b8fa7494 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -282,6 +282,8 @@ section { font-family: "FontAwesome"; margin-right: 13px; font-weight: normal; + position: relative; + top: 2px; } &:nth-child(1) { &:before { -- cgit v1.2.3 From 22dde085dd14e7755f8bd6b16859edac191e2943 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Thu, 19 Feb 2015 14:51:20 -0200 Subject: #239 Fixing unread count indicator styling for the new sidebar --- web-ui/app/scss/styles.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index b8fa7494..ece48319 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -173,6 +173,7 @@ font-size: 0.7em; margin-left: 5px; font-weight: 700; + position: relative; @include border-radius(100px); } @@ -269,7 +270,19 @@ section { } ul#default-tag-list { - span { + .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 { @@ -316,10 +329,12 @@ section { ul#custom-tag-list { padding-bottom: 30px; li { + white-space: nowrap; + overflow: hidden; font-size: 0.8em; padding: 5px 10px 5px 15px; - span { + span.tag-label { padding: 5px 20px 5px 38px; } } -- cgit v1.2.3 From 80ad3d158cb4dfe9c4ea8a28a563f8e95c1fba50 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Thu, 19 Feb 2015 16:21:44 -0200 Subject: #239 Fixing logout style and removing duplicated styling --- web-ui/app/scss/styles.scss | 31 +++++++++++++++---------------- web-ui/app/templates/page/logout.hbs | 8 ++++---- 2 files changed, 19 insertions(+), 20 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index ece48319..952f63cf 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -249,10 +249,9 @@ section { &#left-pane { background-color: $secondary; color: white; - nav { - padding-bottom: 25px; + nav, nav#logout { 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; @@ -327,7 +326,6 @@ section { } ul#custom-tag-list { - padding-bottom: 30px; li { white-space: nowrap; overflow: hidden; @@ -340,21 +338,22 @@ section { } } - ul#logout { - a { - color: #000000; - } - li { - color: #000000; - background-color: $action_buttons; - padding: 5px 10px; - position: relative; - @include searching(4px, 19px, #333, 0.7em); - + ul#logout li { + color: $action_buttons; + background-color: $secondary; + padding: 5px 10px; + position: relative; + @include searching(4px, 19px, #333, 0.7em); + + div { + padding-left: 7px; &:before { + font-size: 1.5em; font-family: "FontAwesome"; - margin-right: 10px; + margin-right: 13px; font-weight: normal; + position: relative; + top: 2px; } } } 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 @@ -- cgit v1.2.3 From 52592a12922f761ce1cc0dc8bb6e92fc5de01ff9 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Thu, 19 Feb 2015 16:32:36 -0200 Subject: #239 Adding hover effect for the logout input --- web-ui/app/scss/styles.scss | 41 ++++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 952f63cf..9846d326 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -249,7 +249,7 @@ section { &#left-pane { background-color: $secondary; color: white; - nav, nav#logout { + nav { border-right: 1px solid lighten($secondary, 10%); ul#default-tag-list, #custom-tag-list { li { @@ -338,22 +338,29 @@ section { } } - ul#logout li { - color: $action_buttons; - background-color: $secondary; - padding: 5px 10px; - position: relative; - @include searching(4px, 19px, #333, 0.7em); - - div { - padding-left: 7px; - &:before { - font-size: 1.5em; - font-family: "FontAwesome"; - margin-right: 13px; - font-weight: normal; - position: relative; - top: 2px; + ul#logout { + li { + color: $action_buttons; + background-color: $secondary; + padding: 5px 10px; + position: relative; + @include searching(4px, 19px, #333, 0.7em); + + &: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; + } } } } -- cgit v1.2.3