Skip to content
This repository has been archived by the owner on Jan 2, 2020. It is now read-only.

Commit

Permalink
Issue #649: Refactor Tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixhammerl
felixhammerl committed Mar 21, 2016
1 parent 4b4975c commit 7948d8f
Show file tree
Hide file tree
Showing 12 changed files with 147 additions and 170 deletions.
4 changes: 2 additions & 2 deletions web-ui/app/js/mail_view/ui/mail_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ define(

function mailView() {
this.defaultAttrs({
tags: '.tag',
tags: '.mail-read-view__header-tags-tag',
newTagInput: '#new-tag-input',
newTagButton: '#new-tag-button',
addNew: '.add-new',
addNew: '.mail-read-view__header-tags-new-button',
trashButton: '#trash-button',
archiveButton: '#archive-button',
closeMailButton: '.close-mail-button'
Expand Down
25 changes: 0 additions & 25 deletions web-ui/app/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,6 @@
@include border-radius(2px);
}

@mixin tt-hint {
.tt-hint {
color: $medium_light_grey
}
.tt-dropdown-menu {
width: 400px;
margin-top: 6px;
padding: 8px 0;
background-color: $contrast;
border: 1px solid darken($contrast, 5%);
}
.tt-suggestion {
padding: 3px 10px;
font-size: 18px;
line-height: 24px;
&.tt-cursor {
background-color: $white;
}
p {
margin: 0;
}
}
}

// FORM MIXINS
@mixin check-box {
background-color: $white;
Expand Down Expand Up @@ -277,5 +253,4 @@
}
}

@include tt-hint;
@include logo;
31 changes: 11 additions & 20 deletions web-ui/app/scss/_styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@
ul#mail-list {
clear: both;
li {
height: 66px;
position: relative;
padding: 8px 10px 10px 10px;
background: $contrast;
Expand All @@ -159,36 +158,28 @@
width: 106%;
}
}
.subject-and-tags {

.subject {
display: block;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include tags;
ul.tags {
display: block;
line-height: 1.2;
margin: -3px 0 0 0;
li {
font-size: 0.6rem;
background-color: lighten($action_buttons, 12);
color: white;
display: inline-block;
height: auto;
font-weight: 400;
border: none;
&.tag:hover {
text-decoration: none;
}
}
}

i.fa-pencil, i.fa-trash-o {
color: $indicator_icon_color;
}
}

.tags {
@include tags;

// HACK: overwrite default from ul li property
&-tag {
border-bottom: none;
}
}

.received-date, .sent-date {
position: absolute;
right: 10px;
Expand Down
156 changes: 94 additions & 62 deletions web-ui/app/scss/mixins/_tags.scss
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,110 @@
$tags-font-size: 0.6rem;

@mixin tags {
i.tags-label {
& > * {
display: inline;
}

&-tag {
font-size: $tags-font-size;
font-weight: normal;
background-color: lighten($action_buttons, 12);
color: white;
padding: 2px 3px;
margin: 0 1px;
border-radius: 2px;
}
}

@mixin tags-editable {
@include tags;

&-tag:hover {
text-decoration: line-through;
cursor: pointer;
position: relative;

&:before {
@include tooltip(130%, 25%);

content: "click to remove";
text-transform: lowercase;
}
}

&-label {
vertical-align: bottom;
font-size: medium;
color: $light_gray;
}

ul.tags {
margin-bottom: 0;
&-new-button {
font-size: $tags-font-size;
padding: 0;
background: transparent;
border-radius: 2px;
padding: 2px;

li {
font-size: 0.6rem;
background-color: lighten($action_buttons, 12);
color: white;
display: inline;
padding: 2px 3px;
margin: 0 1px;
position: relative;
&:hover {
opacity: 1;
background: $lighter_gray;
}
}

@include border-radius(2px);
&-name-input {
opacity: 0.6;
transition: background-color 150ms ease-out;

&[data-tag="drafts"] {
color: $attention;
background: $contrast;
}
&:hover {
opacity: 1;
}

&.tag:hover {
text-decoration: line-through;
cursor: pointer;
}
// twitter typeahead classes. those are set via JS, with relatively high specificity,
// hence box-model-related properties are repeated
// https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names

$suggestion-border: 1px solid darken($contrast, 5%);
$input-field-padding: 1px 5px;
$input-field-margin: 2px;

&.add-new {
opacity: 0.6;
transition: background-color 150ms ease-out;
background: transparent;
border: 1px solid $lighter_gray;
line-height: 0;
padding: 1px 2px;
margin-left: -5px;

@include border-radius(2px);

&:hover {
opacity: 1;
background: $lighter_gray;
}

i {
&:before {
vertical-align: middle;
font-size: smaller;
}
}
& * .tt-input {
border-radius: $input-field-margin;
padding: $input-field-padding;
margin-top: 2px;
font-size: $tags-font-size;
}

& * .tt-hint {
color: $medium_light_grey;
padding: $input-field-padding;
margin-top: $input-field-margin;
font-size: $tags-font-size;
background: transparent;
}

& * .tt-dropdown-menu {
min-width: 250px;
padding: 0;
font-size: $tags-font-size;
background-color: $contrast;
border: $suggestion-border;
}

& * .tt-suggestion {
padding: 5px 10px;
font-size: $tags-font-size;
border-bottom: $suggestion-border;

&:last-child {
border-bottom: none;
}

&.new-tag {
font-size: 0.7em;
display: inline-block;
padding: 0;
background: transparent;

input {
display: inline;
font-size: 1em;
padding: 1px 5px;
width: 120px;
margin: 0;
}

@include tt-hint;

.tt-dropdown-menu {
width: 250px;
}
p {
margin: 0;
}
}

& * .tt-cursor {
background-color: $white;
}
}
}
18 changes: 2 additions & 16 deletions web-ui/app/scss/views/_read-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,24 +113,10 @@
}

&-tags {
@include tags-editable;

clear: both;
margin: 0 0 10px;

// TODO refactor

@include tags;

ul li {
&.tag:hover {
&:before {
content: "click to remove";
text-transform: lowercase;
font-size: 0.5rem;

@include tooltip(18px, 8px);
}
}
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion web-ui/app/templates/mails/draft.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{{t 'no_recipient'}}
{{/if}}
</div>
<div class="subject-and-tags">
<div class="subject">
<i class="fa fa-pencil"></i>
{{#if header.subject }}
{{header.subject}}
Expand Down
32 changes: 16 additions & 16 deletions web-ui/app/templates/mails/full_view.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,24 +42,24 @@

<nav id="mail-actions" class="mail-read-view__header-actions"></nav>

<div class="mail-read-view__header-tags">
<ul class="tags">
<i class="tags-label fa fa-tags"></i>
{{#each tags }}
<li class="tag" data-tag="{{this}}">{{ this }}</li>
{{/each }}
<ul class="mail-read-view__header-tags">
<li class="mail-read-view__header-tags-label">
<i class="fa fa-tags"></i>
</li>

<li class="new-tag">
<input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"
/>
</li>
{{#each tags }}
<li class="mail-read-view__header-tags-tag" data-tag="{{this}}">{{ this }}</li>
{{/each }}

<li class="add-new">
<button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i>
</button>
</li>
</ul>
</div>
<li class="mail-read-view__header-tags-name-input">
<input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"
/>
</li>

<li class="mail-read-view__header-tags-new-button">
<button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i></button>
</li>
</ul>
</header>

<iframe class="mail-read-view__body" id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
Expand Down
14 changes: 6 additions & 8 deletions web-ui/app/templates/mails/sent.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,17 @@
{{t 'no_recipient'}}
{{/if}}
</div>
<div class="subject-and-tags">
<div class="subject">
{{#if header.subject }}
{{header.subject}}
{{else}}
{{t 'no_subject'}}
{{/if}}
</div>
<div class="subject-and-tags">
<ul class="tags">
{{#each tagsForListView }}
<li class="tag" data-tag="{{this}}">{{ this }}</li>
{{/each }}
</ul>
</div>
<ul class="tags">
{{#each tagsForListView }}
<li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
{{/each }}
</ul>
</a>
</span>

0 comments on commit 7948d8f

Please sign in to comment.