diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot
index 58551af8..e241754a 100644
Binary files a/app/fonts/taiga.eot and b/app/fonts/taiga.eot differ
diff --git a/app/fonts/taiga.svg b/app/fonts/taiga.svg
index cb7399ec..8bfe4808 100644
--- a/app/fonts/taiga.svg
+++ b/app/fonts/taiga.svg
@@ -40,4 +40,5 @@
+
diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf
index 72f77047..d6db0a28 100644
Binary files a/app/fonts/taiga.ttf and b/app/fonts/taiga.ttf differ
diff --git a/app/fonts/taiga.woff b/app/fonts/taiga.woff
index d8c023f4..b8a180d4 100644
Binary files a/app/fonts/taiga.woff and b/app/fonts/taiga.woff differ
diff --git a/app/partials/project-colors.jade b/app/partials/project-colors.jade
index fdbcce2c..66dd9253 100644
--- a/app/partials/project-colors.jade
+++ b/app/partials/project-colors.jade
@@ -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
diff --git a/app/partials/views/components/select-color.jade b/app/partials/views/components/select-color.jade
new file mode 100644
index 00000000..9fc3db61
--- /dev/null
+++ b/app/partials/views/components/select-color.jade
@@ -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")
diff --git a/app/partials/views/modules/colors-table.jade b/app/partials/views/modules/colors-table.jade
index db216d4c..6eb9c4fc 100644
--- a/app/partials/views/modules/colors-table.jade
+++ b/app/partials/views/modules/colors-table.jade
@@ -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="#")
diff --git a/app/styles/components/popover.scss b/app/styles/components/popover.scss
index c8eaec22..88175da3 100644
--- a/app/styles/components/popover.scss
+++ b/app/styles/components/popover.scss
@@ -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};
}
}
diff --git a/app/styles/components/select-color.scss b/app/styles/components/select-color.scss
new file mode 100644
index 00000000..5b8cd987
--- /dev/null
+++ b/app/styles/components/select-color.scss
@@ -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;
+ }
+}
diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss
index a4ccbf86..a068ebf8 100755
--- a/app/styles/dependencies/typography.scss
+++ b/app/styles/dependencies/typography.scss
@@ -221,3 +221,6 @@ a:visited {
.icon-github:before {
content: 'G';
}
+.icon-check-square:before {
+ content: 'H';
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 13efc00e..5b049527 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -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';
diff --git a/app/styles/modules/colors-table.scss b/app/styles/modules/colors-table.scss
index 02643563..2954d079 100644
--- a/app/styles/modules/colors-table.scss
+++ b/app/styles/modules/colors-table.scss
@@ -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;
}
+
}