diff --git a/app/assets/stylesheets/content/_work_packages.sass b/app/assets/stylesheets/content/_work_packages.sass index 9dc08dbb9b..4fb9a7b1f2 100644 --- a/app/assets/stylesheets/content/_work_packages.sass +++ b/app/assets/stylesheets/content/_work_packages.sass @@ -41,6 +41,8 @@ @import work_packages/single_view/attachments @import work_packages/single_view/inplace_esque_fields @import work_packages/_work_packages_show_view_overwrite +@import work_packages/details/fullscreen_toggle +@import work_packages/fullscreen/back_button // Tabs @import work_packages/tabs/_activities diff --git a/app/assets/stylesheets/content/work_packages/_table_content.sass b/app/assets/stylesheets/content/work_packages/_table_content.sass index 946140c0b7..f905b81615 100644 --- a/app/assets/stylesheets/content/work_packages/_table_content.sass +++ b/app/assets/stylesheets/content/work_packages/_table_content.sass @@ -61,6 +61,7 @@ // Show details view button when hovering .wp-table--details-link .issue:hover &, + .issue.-checked &, &:focus position: relative left: 0 diff --git a/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass b/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass new file mode 100644 index 0000000000..5095428071 --- /dev/null +++ b/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass @@ -0,0 +1,24 @@ + +// Full screen toggle indicator on the +// left side of the details container +.wp--details--switch-fullscreen + width: 20px + height: 50px + position: absolute + left: -12px + top: calc(50% - 25px) + background: #eee + border: 1px solid $light-gray + color: $body-font-color + cursor: pointer + + &:hover + background: #ddd + + // Align icon + font-size: 10px + text-align: center + padding-top: 18px + + span:before + padding: 0 \ No newline at end of file diff --git a/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass b/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass new file mode 100644 index 0000000000..a74806f488 --- /dev/null +++ b/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass @@ -0,0 +1,8 @@ +.wp-show--back-button + width: 100px + padding: 0 10px + + a + margin: 0 + margin-top: 18px + width: 75px diff --git a/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass b/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass index 15a3ade013..c5f6305b64 100644 --- a/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass +++ b/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass @@ -120,7 +120,7 @@ i height: $work-package-details--tab-height overflow: hidden position: relative - width: 97.5% + width: 100% font-weight: bold text-transform: uppercase @@ -131,15 +131,27 @@ i margin: 0 padding: 0 text-align: center - width: 23.25% + width: 22% cursor: pointer a color: #333 text-decoration: none &:hover text-decoration: none + li.tab-icon + width: 8% + .icon-context:before + padding-top: 10px li.selected color: #999 border-bottom: 2px solid $content-link-color a color: $content-link-color + +.work-packages--details-close-icon span + display: inline-block + padding-top: 2px + font-size: 0.9rem + + &:before + @include varprop(color, $body-font-color) \ No newline at end of file diff --git a/app/assets/stylesheets/layout/_accessibility.sass b/app/assets/stylesheets/layout/_accessibility.sass index 520c58a08f..c997ca7a4c 100644 --- a/app/assets/stylesheets/layout/_accessibility.sass +++ b/app/assets/stylesheets/layout/_accessibility.sass @@ -34,5 +34,9 @@ height: 1px overflow: hidden +body.accessibility-mode + .hidden-for-accessibility + display: none !important + [hidden] display: none diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml index 2fc69e0a90..4d0c529e92 100644 --- a/config/locales/js-en.yml +++ b/config/locales/js-en.yml @@ -57,6 +57,7 @@ en: button_more: "More" button_move: "Move" button_open_details: "Open details view" + button_close_details: "Close details view" button_open_fullscreen: "Open fullscreen view" button_quote: "Quote" button_save: "Save" diff --git a/frontend/app/components/routing/wp-details/wp-details.controller.ts b/frontend/app/components/routing/wp-details/wp-details.controller.ts index bb36816e81..f60a88f14c 100644 --- a/frontend/app/components/routing/wp-details/wp-details.controller.ts +++ b/frontend/app/components/routing/wp-details/wp-details.controller.ts @@ -30,6 +30,7 @@ import {wpControllersModule} from '../../../angular-modules'; import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller'; import {States} from '../../states.service'; import {WorkPackageTableSelection} from '../../wp-fast-table/state/wp-table-selection.service'; +import {KeepTabService} from '../../wp-panels/keep-tab/keep-tab.service'; export class WorkPackageDetailsController extends WorkPackageViewController { @@ -37,6 +38,7 @@ export class WorkPackageDetailsController extends WorkPackageViewController { public $scope:ng.IScope, public $rootScope:ng.IRootScopeService, public states:States, + public keepTab:KeepTabService, public wpTableSelection:WorkPackageTableSelection, public $state:ng.ui.IStateService) { super($injector, $scope, $state.params['workPackageId']); @@ -61,9 +63,22 @@ export class WorkPackageDetailsController extends WorkPackageViewController { }); } + public close() { + this.$state.go('work-packages.list', this.$state.params); + } + + public switchToFullscreen() { + this.$state.go(this.keepTab.currentShowState, this.$state.params); + } + public onWorkPackageSave() { this.$rootScope.$emit('workPackagesRefreshInBackground'); - }; + } + + protected initializeTexts() { + super.initializeTexts(); + this.text.closeDetailsView = this.I18n.t('js.button_close_details'); + } } wpControllersModule.controller('WorkPackageDetailsController', WorkPackageDetailsController); diff --git a/frontend/app/components/routing/wp-details/wp.list.details.html b/frontend/app/components/routing/wp-details/wp.list.details.html index 6fe4787cf2..58dec6224c 100644 --- a/frontend/app/components/routing/wp-details/wp.list.details.html +++ b/frontend/app/components/routing/wp-details/wp.list.details.html @@ -1,3 +1,7 @@ +
+ +
+
  • + + +
    • @@ -45,4 +56,4 @@ >
    - +
  • - + + +
    • +
  • + +
    • -
  • - - -