Add collapse state indicator.

This commit is contained in:
Paulo Reis 2017-07-04 14:05:03 +01:00
parent e40b8500d7
commit e7dd4874ad
2 changed files with 18 additions and 8 deletions

View file

@ -49,6 +49,10 @@
span.review-panel-toolbar-label(ng-if="permissions.write") 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 === false") !{translate("track_changes_is_off")}
span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")} span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
span.rp-tc-state-collapse(
ng-class="{ 'rp-tc-state-collapse-on': reviewPanel.fullTCStateCollapsed }"
)
i.fa.fa-angle-down
ul.rp-tc-state( ul.rp-tc-state(
review-panel-collapse-height="reviewPanel.fullTCStateCollapsed" review-panel-collapse-height="reviewPanel.fullTCStateCollapsed"
) )

View file

@ -57,6 +57,15 @@
} }
} }
.rp-collapse-arrow() {
display: inline-block;
transform: rotateZ(0deg);
transition: transform 0.15s ease;
&-on {
transform: rotateZ(-90deg);
}
}
.triangle(@_, @width, @height, @color) { .triangle(@_, @width, @height, @color) {
position: absolute; position: absolute;
border-color: transparent; border-color: transparent;
@ -162,6 +171,10 @@
border-bottom: 1px solid @rp-border-grey; border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue; background-color: @rp-bg-dim-blue;
text-align: left; text-align: left;
}
.rp-tc-state-collapse {
.rp-collapse-arrow;
margin-left: 5px;
} }
.rp-tc-state-item { .rp-tc-state-item {
display: flex; display: flex;
@ -663,16 +676,9 @@
font-size: 0.9em; font-size: 0.9em;
} }
.rp-overview-file-header-collapse { .rp-overview-file-header-collapse {
display: inline-block; .rp-collapse-arrow;
float: left; float: left;
transform: rotateZ(0deg);
transition: transform 0.15s ease
} }
.rp-overview-file-header-collapse-on {
transform: rotateZ(-90deg);
}
.rp-overview-file-entries { .rp-overview-file-entries {
overflow: hidden; overflow: hidden;
} }