Basic widget for toggling TC state.

This commit is contained in:
Paulo Reis 2017-06-28 14:27:36 +01:00
parent 950c1249eb
commit ccdb29c654
3 changed files with 74 additions and 28 deletions

View file

@ -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")}

View file

@ -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

View file

@ -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;