taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Status color selector refactor

stable
Xavier Julián 2014-07-21 15:10:33 +02:00
parent 03d30d62db
commit fe8f7297f5
12 changed files with 133 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/fonts/taiga.eot
View File

Binary file not shown.

1
app/fonts/taiga.svg
View File

@ -40,4 +40,5 @@
<glyph unicode="&#69;" d="M350 204l-42-42c-2-2-4-3-6-3-3 0-5 1-7 3l-39 39-39-39c-2-2-4-3-7-3-2 0-4 1-6 3l-42 42c-2 2-3 4-3 6 0 3 1 5 3 7l39 39-39 39c-2 2-3 4-3 7 0 2 1 4 3 6l42 42c2 2 4 3 6 3 3 0 5-1 7-3l39-39 39 39c2 2 4 3 7 3 2 0 4-1 6-3l42-42c2-2 3-4 3-6 0-3-1-5-3-7l-39-39 39-39c2-2 3-4 3-7 0-2-1-4-3-6z m61 52c0 28-7 54-20 78-14 24-33 43-57 57-24 13-50 20-78 20-28 0-54-7-78-20-24-14-43-33-57-57-13-24-20-50-20-78 0-28 7-54 20-78 14-24 33-43 57-57 24-13 50-20 78-20 28 0 54 7 78 20 24 14 43 33 57 57 13 24 20 50 20 78z m64 0c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#70;" d="M146 73l220 0 0 110-220 0z m256 0l37 0 0 256c0 3-1 6-3 11-2 5-4 8-6 10l-80 80c-2 2-5 4-10 6-4 2-8 3-11 3l0-119c0-8-3-14-8-19-5-6-12-8-19-8l-165 0c-7 0-14 2-19 8-6 5-8 11-8 19l0 119-37 0 0-366 37 0 0 119c0 8 2 14 8 19 5 6 12 8 19 8l238 0c7 0 14-2 19-8 6-5 8-11 8-19z m-109 265l0 92c0 2-1 4-3 6-2 2-4 3-7 3l-54 0c-3 0-5-1-7-3-2-2-3-4-3-6l0-92c0-2 1-4 3-6 2-2 4-3 7-3l54 0c3 0 5 1 7 3 2 2 3 4 3 6z m182-9l0-265c0-8-2-14-8-19-5-6-11-8-19-8l-384 0c-8 0-14 2-19 8-6 5-8 11-8 19l0 384c0 8 2 14 8 19 5 6 11 8 19 8l265 0c8 0 16-1 25-5 9-4 17-9 22-14l80-80c5-5 10-13 14-22 4-9 5-17 5-25z"/>
<glyph unicode="&#71;" d="M201 165c0-8-1-16-3-24-3-8-7-15-13-22-6-6-12-9-20-9-8 0-15 3-21 9-6 7-10 14-12 22-3 8-4 16-4 24 0 7 1 15 4 23 2 8 6 15 12 22 6 6 13 9 21 9 8 0 14-3 20-9 6-7 10-14 13-22 2-8 3-16 3-23z m183 0c0-8-1-16-4-24-2-8-6-15-12-22-6-6-13-9-21-9-8 0-14 3-20 9-6 7-10 14-13 22-2 8-3 16-3 24 0 7 1 15 3 23 3 8 7 15 13 22 6 6 12 9 20 9 8 0 15-3 21-9 6-7 10-14 12-22 3-8 4-16 4-23z m46 0c0 22-7 42-20 58-13 16-31 24-53 24-8 0-27-2-56-6-14-2-29-3-45-3-16 0-31 1-45 3-29 4-47 6-56 6-22 0-40-8-53-24-13-16-20-36-20-58 0-17 3-32 9-44 7-13 14-23 24-30 9-7 21-13 34-17 14-4 28-7 40-8 13-2 27-2 43-2l48 0c16 0 30 0 43 2 12 1 26 4 40 8 13 4 25 10 34 17 10 7 17 17 24 30 6 12 9 27 9 44z m64 50c0-40-6-71-18-95-7-14-17-27-30-38-13-10-26-19-40-24-14-6-30-11-49-14-18-3-34-5-49-6-14-1-30-1-47-1-15 0-29 0-41 0-12 1-26 2-42 4-16 2-31 5-44 9-13 3-26 8-39 14-13 6-24 14-34 23-11 10-19 21-25 33-12 24-18 55-18 95 0 45 13 83 39 113-5 16-8 32-8 49 0 22 5 42 15 62 21 0 39-4 54-11 16-8 34-20 54-36 28 7 58 10 89 10 28 0 54-3 80-9 20 16 37 27 53 35 16 7 34 11 54 11 10-20 15-40 15-62 0-17-3-33-8-48 26-31 39-69 39-114z"/>
<glyph unicode="&#72;" d="M232 141l176 175c3 4 5 8 5 13 0 5-2 9-5 13l-29 29c-4 4-8 6-13 6-5 0-10-2-13-6l-134-133-60 60c-3 4-8 5-13 5-5 0-9-1-13-5l-29-29c-3-4-5-8-5-13 0-5 2-9 5-13l103-102c3-4 7-6 12-6 5 0 10 2 13 6z m243 252l0-274c0-23-8-42-24-58-16-16-35-24-58-24l-274 0c-23 0-42 8-58 24-16 16-24 35-24 58l0 274c0 23 8 42 24 58 16 16 35 24 58 24l274 0c23 0 42-8 58-24 16-16 24-35 24-58z"/>
</font></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
app/fonts/taiga.ttf
View File

Binary file not shown.

BIN
app/fonts/taiga.woff
View File

Binary file not shown.

2
app/partials/project-colors.jade
View File

@ -18,6 +18,6 @@ block content
div.project-colors-options
a.button.button-green.new-color(href="")
span.text
| + Add new US
| + Add new status
include views/modules/colors-table

6
app/partials/views/components/select-color.jade Normal file
View File

@ -0,0 +1,6 @@
div.popover.select-color
ul
- for (var z = 0; z < 21; z++)
li.color
input(type="text", placeholder="personalized colors")
div.selected-color(style="background-color: red")

61
app/partials/views/modules/colors-table.jade
View File

@ -1,41 +1,34 @@
section.colors-table.basic-table
div.row.title
div.width-1.color-column Color
div.width-6 Name
div.width-2.is-closed-column Is closed?
div.width-1.options-column
section.colors-table
div.table-header
div.row
div.color-column Color
div.status-name Name
div.is-closed-column Is closed?
div.options-column
div.row.table-main
div.width-1.color-column
div.color
div.popover.select-color
ul
- for (var z = 0; z < 21; z++)
li.color
input(type="text", placeholder="personalized colors")
div.selected-color(style="background-color: red")
div.table-main
div.row.row-edit
div.color-column
div.current-color
include ../components/select-color
div.width-6
input(type="text")
div.width-2.is-closed-column
input(type="checkbox")
div.width-1.options-column
a.icon.icon-floppy(href="#")
div.status-name
input(type="text")
div.is-closed-column
input(type="checkbox")
div.options-column
a.icon.icon-floppy(href="#")
a.icon.icon-delete(href="#")
- for (var x = 0; x < 50; x++)
div.row.table-main
div.width-1.color-column
div.color
div.popover.select-color
ul
- for (var z = 0; z < 21; z++)
li.color
input(type="text", placeholder="personalized colors")
div.selected-color(style="background-color: red")
div.color-column
div.current-color
include ../components/select-color
div.width-6 Ready for test
div.width-2.is-closed-column
div.icon.icon-notification-success
div.width-1.options-column
a.icon.icon-delete(href="#")
div.status-name Ready for test
div.is-closed-column
div.icon.icon-check-square
div.options-column
a.icon.icon-edit(href="#")
a.icon.icon-delete(href="#")

2
app/styles/components/popover.scss
View File

@ -28,6 +28,7 @@
}
}
&:after {
@include transform(rotate(45deg));
background: $blackish;
bottom: #{$arrow-bottom};
content: '';
@ -35,7 +36,6 @@
left: #{$arrow-left};
position: absolute;
top: #{$arrow-top};
transform: rotate(45deg);
width: #{$arrow-width};
}
}

42
app/styles/components/select-color.scss Normal file
View File

@ -0,0 +1,42 @@
.select-color {
@include popover(323px, 0, 50px, '', '', 15px, 13px, -7px);
border-radius: 0 10px 10px 0;
padding: 15px;
li {
float: left;
margin: 0 .5rem .5rem 0;
&:nth-child(7n) {
margin-right: 0;
}
&:nth-last-child(-n+7) {
margin-bottom: 0;
}
}
.color {
background-color: $gray-light;
border-radius: 2px;
cursor: pointer;
height: 35px;
width: 35px;
}
ul {
float: left;
margin-bottom: 1rem;
}
input {
@extend %medium;
@extend %text;
background-color: $very-light-gray;
width: 243px;
@include placeholder {
color: $gray;
}
}
.selected-color {
background: $gray-light;
border-radius: 2px;
float: right;
height: 40px;
width: 40px;
}
}

3
app/styles/dependencies/typography.scss
View File

@ -221,3 +221,6 @@ a:visited {
.icon-github:before {
content: 'G';
}
.icon-check-square:before {
content: 'H';
}

1
app/styles/main.scss
View File

@ -33,6 +33,7 @@ $prefix-for-spec: true;
@import 'components/level';
@import 'components/assigned-to';
@import 'components/wysiwyg';
@import 'components/select-color';
//Modules
@import 'modules/nav';

119
app/styles/modules/colors-table.scss
View File

@ -1,93 +1,76 @@
.colors-table {
.row {
&:hover {
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
}
}
.row-selected {
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
}
.title {
.table-header {
@extend %medium;
@extend %bold;
border-bottom: 1px solid $gray-light;
border-bottom: 2px solid $gray-light;
&:hover {
background: transparent;
}
}
.row {
@include table-flex(stretch, center, flex, row, wrap, center);
padding: 1rem;
&:hover {
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
.options-column {
@include transition (opacity .3s linear);
opacity: 1;
}
}
.color-column,
.is-closed-column,
.options-column {
@include table-flex-child(1, 100px, 0);
}
.color-column {
max-width: 100px;
position: relative;
}
.status-name {
@include table-flex-child(6, 300px, 0);
}
.options-column {
max-width: 100px;
opacity: 0;
text-align: right;
}
.is-closed-column {
max-width: 130px;
text-align: center;
}
}
.row-edit {
.options-column {
opacity: 1;
}
}
.table-main {
@extend %small;
border-bottom: 1px solid $gray-light;
}
.color {
.current-color {
background-color: $gray-light;
border-radius: 2px;
cursor: pointer;
height: 35px;
width: 35px;
height: 40px;
width: 40px;
}
.icon-floppy,
.icon-delete,
.icon-edit {
.icon {
@extend %large;
float: right;
margin-right: .5rem;
}
.icon-floppy {
color: $gray-light;
margin-right: 1rem;
&:hover {
color: $green-taiga;
}
}
.icon-delete {
margin-right: 1rem;
&:hover {
color: $red;
}
}
.icon-notification-success {
.icon-check-square {
@extend %large;
color: $fresh-taiga;
}
.select-color {
@include popover(323px, 10px, 70px, '', '', 15px, 13px, -7px);
border-radius: 0 10px 10px 0;
padding: 15px;
li {
float: left;
margin: 0 .5rem .5rem 0;
&:nth-child(7n) {
margin-right: 0;
}
&:nth-last-child(-n+7) {
margin-bottom: 0;
}
}
ul {
float: left;
margin-bottom: 1rem;
}
input {
@extend %text;
background-color: $very-light-gray;
width: 243px;
@include placeholder {
color: $gray;
}
}
.selected-color {
float: right;
height: 40px;
width: 40px;
}
}
.color-column {
max-width: 100px;
}
.is-closed-column {
max-width: 130px;
text-align: center;
}
.options-column {
max-width: 100px;
color: $green-taiga;
}
}