diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 935ce8bb28..e02b9ec3d0 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -58,6 +58,15 @@ div.full-size( doc-id="editor.open_doc_id" renderer-data="reviewPanel.rendererData" ) + + a.rp-track-changes-indicator( + href + ng-if="editor.wantTrackChanges" + ng-click="toggleReviewPanel();" + ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" + ) Track changes is + strong on + include ./review-panel diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 759c7705a6..54142f2dcc 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -827,4 +827,41 @@ color: darken(@rp-type-blue, 5%); text-decoration: none; } -} \ No newline at end of file +} + +.rp-track-changes-indicator { + display: none; + position: absolute; + top: 0; + right: @review-off-width; + padding: 5px 10px; + background-color: rgba(240, 240, 240, 0.9); + color: @rp-type-blue; + text-align: center; + border-bottom-left-radius: 3px; + font-size: 10px; + z-index: 2; + + &.rp-track-changes-indicator-on-dark { + background-color: rgba(88, 88, 88, .8); + color: #FFF; + + &:hover, + &:focus { + background-color: rgba(88, 88, 88, 1); + color: #FFF; + } + } + + &:hover, + &:focus { + outline: 0; + text-decoration: none; + background-color: rgba(240, 240, 240, 1); + color: @rp-type-blue; + } + + .rp-size-mini & { + display: block; + } +}