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?",

79
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 label(
legend( 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"
@ -92,35 +88,37 @@ 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"
translate="COMMON.SAVE"
ng-show="relatedWithSelector=='new-user-story'"
) )
span(
translate="COMMON.SAVE"
)
.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"
translate="COMMON.SAVE"
) )
span(
translate="COMMON.SAVE"
)

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

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