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

Project profile front refactor

stable
Xavier Julián 2014-07-30 12:10:46 +02:00
parent 3cd33bdb6f
commit 5a8c635143
5 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/partials/admin-project-features.jade
View File

@ -18,47 +18,67 @@ block content
form
div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]")
input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_backlog_activated")
div.icon.icon-backlog
div.desc
p
span Backlog
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
div.activate
input.activate-input(type="checkbox", id="functionality-backlog", ng-model="project.is_backlog_activated")
label.button.button-gray(ng-switch="project.is_backlog_activated", for="functionality-backlog")
span(ng-switch-when="true") Disable
span(ng-switch-when="false") Enable
div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]")
input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_kanban_activated")
div.icon.icon-kanban
div.desc
p
span Kanban
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
div.activate
input.activate-input(type="checkbox", id="functionality-kanban", ng-model="project.is_kanban_activated")
label.button.button-gray(ng-switch="project.is_kanban_activated", for="functionality-kanban")
span(ng-switch-when="true") Disable
span(ng-switch-when="false") Enable
div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]")
input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_issues_activated")
div.icon.icon-issues
div.desc
p
span Issues
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
div.activate
input.activate-input(type="checkbox", id="functionality-issues", ng-model="project.is_issues_activated")
label.button.button-gray(ng-switch="project.is_issues_activated", for="functionality-issues")
span(ng-switch-when="true") Disable
span(ng-switch-when="false") Enable
div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]")
input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_wiki_activated")
div.icon.icon-wiki
div.desc
p
span Wiki
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
div.activate
input.activate-input(type="checkbox", id="functionality-wiki", ng-model="project.is_wiki_activated")
label.button.button-gray(ng-switch="project.is_wiki_activated", for="functionality-wiki")
span(ng-switch-when="true") Disable
span(ng-switch-when="false") Enable
div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]")
input(type="checkbox", style="width:40px; height: 40px;", ng-model="isVideoconferenceActivated")
div.icon.icon-video
div.desc
p
span Video
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
div.activate
input.activate-input(type="checkbox", id="functionality-video", ng-model="isVideoconferenceActivated")
label.button.button-gray(ng-switch="isVideoconferenceActivated", for="functionality-video")
span(ng-switch-when="true") Disable
span(ng-switch-when="false") Enable
div.videoconference-attributes.hidden
select(ng-model="project.videoconferences", ng-options="e.id as e.name for e in [{'id':'appear-in', 'name':'AppearIn'},{'id':'talky', 'name': 'Talky'}]")
input(ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)")
input(type="text", ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)")
input(type="submit", class="hidden")
a.button.button-green(href="") Save

1
app/styles/components/buttons.scss
View File

@ -42,6 +42,7 @@ a.button-green {
}
}
.button-gray,
a.button-gray {
background: $button-gray;
&:hover {

10
app/styles/dependencies/mixins.scss
View File

@ -11,12 +11,12 @@
// Table Flex - http://devbryce.com/site/flexbox/
@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
align-content: $align-content;
align-items: $align-items;
align-content: $align-content; // flex-start, flex-end, center, space-between, space-around, stretch
align-items: $align-items; //flex-start, flex-end, center, baseline, stretch
display: $display;
flex-direction: $flex-direction;
flex-wrap: $flex-wrap;
justify-content: $justify-content;
flex-direction: $flex-direction; //row | row-reverse | column | column-reverse
flex-wrap: $flex-wrap; // nowrap | wrap | wrap-reverse
justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around
}
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {

46
app/styles/modules/admin/admin-functionalities.scss
View File

@ -1,32 +1,50 @@
.admin-functionalities {
.functionality {
@include transition(all .2s linear);
@include table-flex();
background-color: $whitish;
display: flex;
margin-bottom: 1rem;
padding: 2rem;
.icon,
.desc {
opacity: .5;
opacity: .5;
padding: 1rem;
position: relative;
&.active {
background-color: #e9f0da;
opacity: 1;
.icon {
}
}
p {
margin-bottom: 0;
.icon {
@include table-flex-child(1, 0, 0);
@include transform(translate(1rem, 1rem));
}
.desc {
@include table-flex-child(10 , 0, 0);
}
.activate-input {
display: none;
+label {
color: $white;
cursor: pointer;
}
}
span {
font-weight: bold;
}
p {
margin-bottom: .5rem;
}
select {
margin-top: 1rem;
}
&.active {
background-color: #e9f0da;
div,
p {
opacity: 1;
}
}
}
.icon {
@extend %xxlarge;
margin-right: 2rem;
}
.videoconference-attributes {
select {
margin-bottom: .5rem;
}
}
}

2
app/styles/modules/admin/admin-project-profile.scss
View File

@ -11,7 +11,7 @@
label {
@extend %title;
display: block;
margin-bottom: .5rem;
margin-bottom: .2rem;
}
input[type="text"] {
width: 50%;