diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json index 6f7a4823..e90ba578 100644 --- a/app/locales/taiga/locale-en.json +++ b/app/locales/taiga/locale-en.json @@ -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?", diff --git a/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.jade b/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.jade index 468acbbb..9f549da1 100644 --- a/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.jade +++ b/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.jade @@ -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" - ) diff --git a/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.scss b/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.scss index 82412585..1e397dbf 100644 --- a/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.scss +++ b/app/modules/epics/related-userstories/related-userstories-create/related-userstories-create.scss @@ -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%; } }