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

Layout refactor for epics lightbox

stable
Xavier Julián 2016-09-13 12:58:59 +02:00 committed by David Barragán Merino
parent 8e3e49c1a7
commit 182dd4720e
3 changed files with 100 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/locales/taiga/locale-en.json
View File

@ -1075,11 +1075,10 @@
"TITLE_LIGHTBOX_DELETE_RELATED_USERSTORY": "Delete related userstory...", "TITLE_LIGHTBOX_DELETE_RELATED_USERSTORY": "Delete related userstory...",
"MSG_LIGHTBOX_DELETE_RELATED_USERSTORY": "the related userstory '{{subject}}'", "MSG_LIGHTBOX_DELETE_RELATED_USERSTORY": "the related userstory '{{subject}}'",
"ERROR_DELETE_RELATED_USERSTORY": "We have not been able to delete: {{errorMessage}}", "ERROR_DELETE_RELATED_USERSTORY": "We have not been able to delete: {{errorMessage}}",
"CREATE_RELATED_USERSTORIES": "Create a relationship with a user story", "CREATE_RELATED_USERSTORIES": "Create a relationship with",
"RELATED_WITH": "Related with",
"NEW_USERSTORY": "New user story", "NEW_USERSTORY": "New user story",
"EXISTING_USERSTORY": "Existing user story", "EXISTING_USERSTORY": "Existing user story",
"CHOOSE_PROJECT_FOR_CREATION": "Whats' the project?", "CHOOSE_PROJECT_FOR_CREATION": "What's the project?",
"SUBJECT": "Subject", "SUBJECT": "Subject",
"SUBJECT_BULK_MODE": "Subject (bulk insert)", "SUBJECT_BULK_MODE": "Subject (bulk insert)",
"CHOOSE_PROJECT_FROM": "What's the project?", "CHOOSE_PROJECT_FROM": "What's the project?",

61
app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.jade
View File

@ -4,17 +4,14 @@ a.add-button.e2e-add-userstory-button(
) )
tg-svg(svg-icon="icon-add") tg-svg(svg-icon="icon-add")
div.lightbox.lightbox-create-related-user-stories .lightbox.lightbox-create-related-user-stories
tg-lightbox-close tg-lightbox-close
div.form .lightbox-create-related-user-stories-wrapper
h2.title(translate="EPIC.CREATE_RELATED_USERSTORIES") h2.title(translate="EPIC.CREATE_RELATED_USERSTORIES")
.related-with-selector-title
legend(translate="EPIC.RELATED_WITH")
.related-with-selector .related-with-selector
fieldset .related-with-selector-single
input( input(
type="radio" type="radio"
name="related-with-selector" name="related-with-selector"
@ -26,7 +23,7 @@ div.lightbox.lightbox-create-related-user-stories
label.e2e-new-userstory-label(for="new-user-story") label.e2e-new-userstory-label(for="new-user-story")
span.name {{ 'EPIC.NEW_USERSTORY' | translate}} span.name {{ 'EPIC.NEW_USERSTORY' | translate}}
fieldset .related-with-selector-single
input( input(
type="radio" type="radio"
name="related-with-selector" name="related-with-selector"
@ -37,40 +34,39 @@ div.lightbox.lightbox-create-related-user-stories
label.e2e-existing-user-story-label(for="existing-user-story") label.e2e-existing-user-story-label(for="existing-user-story")
span.name {{ 'EPIC.EXISTING_USERSTORY' | translate}} span.name {{ 'EPIC.EXISTING_USERSTORY' | translate}}
.project-selector-title fieldset.project-selector
legend( label(
ng-if="relatedWithSelector=='new-user-story'" ng-if="relatedWithSelector=='new-user-story'"
translate="EPIC.CHOOSE_PROJECT_FOR_CREATION" translate="EPIC.CHOOSE_PROJECT_FOR_CREATION"
for="project-selector-dropdown"
) )
label(
legend(
ng-if="relatedWithSelector=='existing-user-story'" ng-if="relatedWithSelector=='existing-user-story'"
translate="EPIC.CHOOSE_PROJECT_FROM" translate="EPIC.CHOOSE_PROJECT_FROM"
for="project-selector-dropdown"
) )
.project-selector()
select( select(
ng-model="selectedProject" ng-model="selectedProject"
ng-change="selectProject(selectedProject)" ng-change="selectProject(selectedProject)"
data-required="true" data-required="true"
required required
ng-options="p.id as p.name for p in vm.projects | toMutable" ng-options="p.id as p.name for p in vm.projects | toMutable"
id="project-selector-dropdown"
) )
div(ng-show="relatedWithSelector=='new-user-story'") fieldset(ng-show="relatedWithSelector=='new-user-story'")
.new-user-story-selector
.new-user-story-title .new-user-story-title
legend( label(
ng-show="creationMode=='single-new-user-story'" ng-show="creationMode=='single-new-user-story'"
translate="EPIC.SUBJECT" translate="EPIC.SUBJECT"
) )
legend( label(
ng-show="creationMode=='bulk-new-user-stories'" ng-show="creationMode=='bulk-new-user-stories'"
translate="EPIC.SUBJECT_BULK_MODE" translate="EPIC.SUBJECT_BULK_MODE"
) )
.new-user-story-options .new-user-story-options
fieldset .new-user-story-option-single
input( input(
type="radio" type="radio"
name="new-user-story-selector" name="new-user-story-selector"
@ -82,7 +78,7 @@ div.lightbox.lightbox-create-related-user-stories
label.e2e-single-creation-label(for="single-new-user-story") label.e2e-single-creation-label(for="single-new-user-story")
tg-svg(svg-icon="icon-add") tg-svg(svg-icon="icon-add")
fieldset .new-user-story-option-single
input( input(
type="radio" type="radio"
name="new-user-story-selector" name="new-user-story-selector"
@ -93,34 +89,36 @@ div.lightbox.lightbox-create-related-user-stories
label.e2e-bulk-creation-label(for="bulk-new-user-stories") label.e2e-bulk-creation-label(for="bulk-new-user-stories")
tg-svg(svg-icon="icon-bulk") tg-svg(svg-icon="icon-bulk")
form.new-user-story-form form.new-user-story-form
.single-creation(ng-show="creationMode=='single-new-user-story'") .single-creation(ng-show="creationMode=='single-new-user-story'")
input.e2e-new-userstory-input-text( input.e2e-new-userstory-input-text(
type="text" type="text"
ng-model="relatedUserstoriesText" ng-model="relatedUserstoriesText"
data-required="true" required
) )
.bulk-creation(ng-show="creationMode=='bulk-new-user-stories'") .bulk-creation(ng-show="creationMode=='bulk-new-user-stories'")
textarea.e2e-new-userstories-input-textarea( textarea.e2e-new-userstories-input-textarea(
ng-model="relatedUserstoriesText" ng-model="relatedUserstoriesText"
data-required="true" required
) )
a.button-green.e2e-create-userstory-button( button.button-green.create-user-story.e2e-create-userstory-button.ng-animate-disabled(
href="" href=""
ng-click="vm.bulkCreateRelatedUserStories(selectedProject, relatedUserstoriesText, closeLightbox)" ng-click="vm.bulkCreateRelatedUserStories(selectedProject, relatedUserstoriesText, closeLightbox)"
tg-loading="vm.loading" tg-loading="vm.loading"
)
span(
translate="COMMON.SAVE" translate="COMMON.SAVE"
ng-show="relatedWithSelector=='new-user-story'"
) )
.existing-user-story(ng-show="relatedWithSelector=='existing-user-story'") fieldset.existing-user-story(ng-show="relatedWithSelector=='existing-user-story'")
.existing-user-story-title label(
legend(translate="EPIC.CHOOSE_USERSTORY") translate="EPIC.CHOOSE_USERSTORY"
for="userstory-filter"
input.userstory.e2e-filter-userstories-input( )
input.userstory-filter.e2e-filter-userstories-input(
id="userstory-filter"
type="text" type="text"
placeholder="{{'EPIC.FILTER_USERSTORIES' | translate}}" placeholder="{{'EPIC.FILTER_USERSTORIES' | translate}}"
ng-model="searchUserstory" ng-model="searchUserstory"
@ -132,7 +130,6 @@ div.lightbox.lightbox-create-related-user-stories
size="5" size="5"
ng-model="selectedUserstory" ng-model="selectedUserstory"
required required
data-required="true"
) )
- var hash = "#"; - var hash = "#";
option.hidden( option.hidden(
@ -143,11 +140,9 @@ div.lightbox.lightbox-create-related-user-stories
value="{{ ::us.id }}" value="{{ ::us.id }}"
) #{hash}{{::us.ref}} {{::us.subject}} ) #{hash}{{::us.ref}} {{::us.subject}}
a.button-green.e2e-select-related-userstory-button( button.button-green.e2e-select-related-userstory-button(
href="" href=""
ng-click="vm.saveRelatedUserStory(selectedUserstory, closeLightbox)" ng-click="vm.saveRelatedUserStory(selectedUserstory, closeLightbox)"
tg-loading="vm.loading" tg-loading="vm.loading"
)
span(
translate="COMMON.SAVE" translate="COMMON.SAVE"
) )

97
app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.scss
View File

@ -1,36 +1,20 @@
.lightbox-create-related-user-stories { .lightbox-create-related-user-stories {
.related-with-selector-title, .lightbox-create-related-user-stories-wrapper {
.project-selector-title, max-width: 600px;
.new-user-story-title, width: 90%;
.existing-user-story-title {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
} }
.related-with-selector, .related-with-selector {
.new-user-story-selector {
display: flex; display: flex;
margin-bottom: 1rem;
input { input {
display: none; display: none;
}
fieldset {
&:first-child {
margin-right: .5rem;
}
}
}
.project-selector,
.single-creation {
margin-bottom: 1rem;
}
input {
&:checked+label { &:checked+label {
background: $primary-light; background: $primary-light;
color: $white; color: $white;
transition: background .2s ease-in; transition: background .2s ease-in;
&:hover {
background: $primary-light;
} }
&:checked+label:hover {
background: $primary-light;
} }
+label { +label {
background: rgba($whitish, .7); background: rgba($whitish, .7);
@ -38,41 +22,62 @@
display: block; display: block;
padding: 2rem 1rem; padding: 2rem 1rem;
text-align: center; text-align: center;
text-transform: uppercase;
transition: background .2s ease-in; transition: background .2s ease-in;
&:hover { }
+label:hover {
background: rgba($primary-light, .3); background: rgba($primary-light, .3);
transition: background .2s ease-in; transition: background .2s ease-in;
} }
.icon {
fill: currentColor;
margin-top: .25rem;
vertical-align: text-top;
} }
.name { .related-with-selector-single {
@include font-size(large); flex: 1;
text-transform: uppercase; &:first-child {
margin-right: .5rem;
} }
} }
} }
.new-user-story-selector {
display: flex;
justify-content: space-between;
.new-user-story-options {
display: flex;
}
fieldset { fieldset {
width: auto;
}
label { label {
height: 1.5rem; display: inline-block;
padding: 0; margin-bottom: .5rem;
width: 1.5rem;
} }
} }
.new-user-story-title {
.existing-user-story { align-items: flex-end;
.button-green { display: flex;
margin-top: 1rem; }
.existing-user-story-form,
.new-user-story-form {
margin-bottom: 1rem;
}
.new-user-story-options {
display: flex;
margin-left: auto;
input {
display: none;
&:checked+label {
background: $primary-light;
color: $white;
fill: $white;
transition: background .2s ease-in;
}
+label {
background: $mass-white;
color: $grayer;
cursor: pointer;
display: block;
padding: .5rem;
transition: background .2s ease-in;
}
+label:hover {
background: $primary-light;
color: $white;
fill: $white;
} }
} }
} }
button {
width: 100%;
}
}