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...",
"MSG_LIGHTBOX_DELETE_RELATED_USERSTORY": "the related userstory '{{subject}}'",
"ERROR_DELETE_RELATED_USERSTORY": "We have not been able to delete: {{errorMessage}}",
"CREATE_RELATED_USERSTORIES": "Create a relationship with a user story",
"RELATED_WITH": "Related with",
"CREATE_RELATED_USERSTORIES": "Create a relationship with",
"NEW_USERSTORY": "New 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_BULK_MODE": "Subject (bulk insert)",
"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")
div.lightbox.lightbox-create-related-user-stories
.lightbox.lightbox-create-related-user-stories
tg-lightbox-close
div.form
.lightbox-create-related-user-stories-wrapper
h2.title(translate="EPIC.CREATE_RELATED_USERSTORIES")
.related-with-selector-title
legend(translate="EPIC.RELATED_WITH")
.related-with-selector
fieldset
.related-with-selector-single
input(
type="radio"
name="related-with-selector"
@ -26,7 +23,7 @@ div.lightbox.lightbox-create-related-user-stories
label.e2e-new-userstory-label(for="new-user-story")
span.name {{ 'EPIC.NEW_USERSTORY' | translate}}
fieldset
.related-with-selector-single
input(
type="radio"
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")
span.name {{ 'EPIC.EXISTING_USERSTORY' | translate}}
.project-selector-title
legend(
fieldset.project-selector
label(
ng-if="relatedWithSelector=='new-user-story'"
translate="EPIC.CHOOSE_PROJECT_FOR_CREATION"
for="project-selector-dropdown"
)
legend(
label(
ng-if="relatedWithSelector=='existing-user-story'"
translate="EPIC.CHOOSE_PROJECT_FROM"
for="project-selector-dropdown"
)
.project-selector()
select(
ng-model="selectedProject"
ng-change="selectProject(selectedProject)"
data-required="true"
required
ng-options="p.id as p.name for p in vm.projects | toMutable"
id="project-selector-dropdown"
)
div(ng-show="relatedWithSelector=='new-user-story'")
.new-user-story-selector
.new-user-story-title
legend(
ng-show="creationMode=='single-new-user-story'"
translate="EPIC.SUBJECT"
)
fieldset(ng-show="relatedWithSelector=='new-user-story'")
.new-user-story-title
label(
ng-show="creationMode=='single-new-user-story'"
translate="EPIC.SUBJECT"
)
legend(
ng-show="creationMode=='bulk-new-user-stories'"
translate="EPIC.SUBJECT_BULK_MODE"
)
label(
ng-show="creationMode=='bulk-new-user-stories'"
translate="EPIC.SUBJECT_BULK_MODE"
)
.new-user-story-options
fieldset
.new-user-story-option-single
input(
type="radio"
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")
tg-svg(svg-icon="icon-add")
fieldset
.new-user-story-option-single
input(
type="radio"
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")
tg-svg(svg-icon="icon-bulk")
form.new-user-story-form
.single-creation(ng-show="creationMode=='single-new-user-story'")
input.e2e-new-userstory-input-text(
type="text"
ng-model="relatedUserstoriesText"
data-required="true"
required
)
.bulk-creation(ng-show="creationMode=='bulk-new-user-stories'")
textarea.e2e-new-userstories-input-textarea(
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=""
ng-click="vm.bulkCreateRelatedUserStories(selectedProject, relatedUserstoriesText, closeLightbox)"
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'")
.existing-user-story-title
legend(translate="EPIC.CHOOSE_USERSTORY")
input.userstory.e2e-filter-userstories-input(
fieldset.existing-user-story(ng-show="relatedWithSelector=='existing-user-story'")
label(
translate="EPIC.CHOOSE_USERSTORY"
for="userstory-filter"
)
input.userstory-filter.e2e-filter-userstories-input(
id="userstory-filter"
type="text"
placeholder="{{'EPIC.FILTER_USERSTORIES' | translate}}"
ng-model="searchUserstory"
@ -132,7 +130,6 @@ div.lightbox.lightbox-create-related-user-stories
size="5"
ng-model="selectedUserstory"
required
data-required="true"
)
- var hash = "#";
option.hidden(
@ -143,11 +140,9 @@ div.lightbox.lightbox-create-related-user-stories
value="{{ ::us.id }}"
) #{hash}{{::us.ref}} {{::us.subject}}
a.button-green.e2e-select-related-userstory-button(
button.button-green.e2e-select-related-userstory-button(
href=""
ng-click="vm.saveRelatedUserStory(selectedUserstory, closeLightbox)"
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 {
.related-with-selector-title,
.project-selector-title,
.new-user-story-title,
.existing-user-story-title {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
.lightbox-create-related-user-stories-wrapper {
max-width: 600px;
width: 90%;
}
.related-with-selector,
.new-user-story-selector {
.related-with-selector {
display: flex;
margin-bottom: 1rem;
input {
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 {
margin-right: .5rem;
}
}
}
.project-selector,
.single-creation {
fieldset {
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;
}
input {
&:checked+label {
background: $primary-light;
color: $white;
transition: background .2s ease-in;
&:hover {
.new-user-story-options {
display: flex;
margin-left: auto;
input {
display: none;
&:checked+label {
background: $primary-light;
}
}
+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);
color: $white;
fill: $white;
transition: background .2s ease-in;
}
.icon {
fill: currentColor;
margin-top: .25rem;
vertical-align: text-top;
+label {
background: $mass-white;
color: $grayer;
cursor: pointer;
display: block;
padding: .5rem;
transition: background .2s ease-in;
}
.name {
@include font-size(large);
text-transform: uppercase;
+label:hover {
background: $primary-light;
color: $white;
fill: $white;
}
}
}
.new-user-story-selector {
display: flex;
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;
}
button {
width: 100%;
}
}