From ccdb29c65454c9de0bb9524c67e917df649e0940 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 28 Jun 2017 14:27:36 +0100 Subject: [PATCH] Basic widget for toggling TC state. --- .../app/views/project/editor/review-panel.pug | 62 +++++++++++-------- .../controllers/ReviewPanelController.coffee | 4 ++ .../stylesheets/app/editor/review-panel.less | 36 ++++++++++- 3 files changed, 74 insertions(+), 28 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index c78d4baf64..960fece11f 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -46,31 +46,43 @@ is-loading="reviewPanel.dropdown.loading" permissions="permissions" ) - div - span On for everyone - review-panel-toggle( - ng-model="reviewPanel.trackChangesOnForEveryone" - on-toggle="toggleTrackChangesForEveryone" - disabled="!project.features.trackChanges" - on-disabled-click="openTrackChangesUpgradeModal" - ) - div - span You {{user.id}} - //- Missing on-toggle attribute because we also need to pass user_id to the toggleTrackChangesForUser - //- method, and it's not clear how. - review-panel-toggle( - ng-model="reviewPanel.trackChangesState[user.id]" - disabled="!project.features.trackChanges" - on-disabled-click="openTrackChangesUpgradeModal" - ) - div(ng-repeat="member in project.members") - span {{member.email}} {{member._id}} - review-panel-toggle( - ng-model="reviewPanel.trackChangesState[member._id]" - disabled="!project.features.trackChanges" - on-disabled-click="openTrackChangesUpgradeModal" - ) - + span.review-panel-toolbar-label(ng-if="permissions.write") + span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")} + span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")} + ul.rp-tc-state( + review-panel-collapse-height="reviewPanel.fullTCStateCollapsed" + ) + li.rp-tc-state-item + span.rp-tc-state-item-name.rp-tc-state-item-name-everyone Everyone + review-panel-toggle( + ng-model="reviewPanel.trackChangesOnForEveryone" + on-toggle="toggleTrackChangesForEveryone" + disabled="!project.features.trackChanges" + on-disabled-click="openTrackChangesUpgradeModal" + ) + li.rp-tc-state-item + span.rp-tc-state-item-name.rp-tc-state-item-self( + style="color: hsl({{ users[user.id].hue }}, 70%, 40%);" + ) {{ users[user.id].name }} + //- {{user.id}} + //- Missing on-toggle attribute because we also need to pass user_id to the toggleTrackChangesForUser + //- method, and it's not clear how. + review-panel-toggle( + ng-model="reviewPanel.trackChangesState[user.id]" + disabled="!project.features.trackChanges" + on-disabled-click="openTrackChangesUpgradeModal" + ) + li.rp-tc-state-item(ng-repeat="member in project.members") + span.rp-tc-state-item-name( + style="color: hsl({{ users[member._id].hue }}, 70%, 40%);" + ) {{ users[member._id].name }} + //- {{member._id}} + review-panel-toggle( + ng-model="reviewPanel.trackChangesState[member._id]" + disabled="!project.features.trackChanges" + on-disabled-click="openTrackChangesUpgradeModal" + ) + //- span.review-panel-toolbar-label(ng-if="permissions.write") //- span(ng-click="toggleTrackChanges(true)", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")} //- span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")} diff --git a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee index 53055c05fd..9eb2cd5ea2 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -28,6 +28,7 @@ define [ commentThreads: {} resolvedThreadIds: {} rendererData: {} + fullTCStateCollapsed: true loadingThreads: false # All selected changes. If a aggregated change (insertion + deletion) is selection, the two ids # will be present. The length of this array will differ from the count below (see explanation). @@ -601,6 +602,9 @@ define [ event_tracking.sendMB "rp-trackchanges-toggle", { state } else $scope.openTrackChangesUpgradeModal() + + $scope.toggleFullTCStateCollapse = () -> + reviewPanel.fullTCStateCollapsed = !reviewPanel.fullTCStateCollapsed $scope.toggleTrackChangesForEveryone = (onForEveryone) -> console.log "[toggleTrackChangesForEveryone]", onForEveryone diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index d94418d60d..df1f74471d 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -124,15 +124,13 @@ .review-panel-toolbar { display: none; .rp-size-expanded & { - display: block; - // display: flex; TODO + display: flex; align-items: center; justify-content: space-between; padding: 0 5px; } position: relative; - // height: @rp-toolbar-height; TODO border-bottom: 1px solid @rp-border-grey; background-color: @rp-bg-dim-blue; text-align: center; @@ -152,6 +150,38 @@ .review-panel-toolbar-spinner { margin-left: 5px; } + .rp-tc-state { + position: absolute; + top: 100%; + left: 0; + right: 0; + overflow: hidden; + list-style: none; + padding: 0 5px; + margin: 0; + border-bottom: 1px solid @rp-border-grey; + background-color: @rp-bg-dim-blue; + text-align: left; + } + .rp-tc-state-item { + display: flex; + align-items: center; + border-bottom: 1px solid @rp-border-grey; + padding: 3px 0; + &:last-of-type { + padding-bottom: 5px; + } + } + .rp-tc-state-item-name { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: @rp-semibold-weight; + } + .rp-tc-state-item-name-everyone { + color: @red; + } .rp-entry-list { display: none;