github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Restyle insertions and deletions - increasing info density.

Browse source
This commit is contained in:
Paulo Reis 2017-01-04 15:24:49 +00:00
parent 988005e929
commit fdafcf9677
2 changed files with 54 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
services/web/app/views/project/editor/review-panel.jade
View file

@ -116,19 +116,19 @@ script(type='text/ng-template', id='changeEntryTemplate')
.rp-entry( .rp-entry(
ng-class="[ 'rp-entry-' + entry.type, (entry.focused ? 'rp-entry-focused' : '')]" ng-class="[ 'rp-entry-' + entry.type, (entry.focused ? 'rp-entry-focused' : '')]"
) )
.rp-entry-header .rp-entry-body
.rp-entry-action-icon(ng-switch="entry.type") .rp-entry-action-icon(ng-switch="entry.type")
i.fa.fa-pencil(ng-switch-when="insert") i.fa.fa-pencil(ng-switch-when="insert")
i.rp-icon-delete(ng-switch-when="delete") i.rp-icon-delete(ng-switch-when="delete")
.rp-entry-metadata .rp-entry-details
p.rp-entry-metadata-line(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }} .rp-entry-description(ng-switch="entry.type")
p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} span(ng-switch-when="insert") Added 
.rp-avatar(style="background-color: hsl({{ user.hue }}, 70%, 50%);") {{ user.avatar_text | limitTo : 1 }} ins.rp-content-highlight {{ entry.content }}
.rp-entry-body(ng-switch="entry.type") span(ng-switch-when="delete") Deleted 
span(ng-switch-when="insert") Added  del.rp-content-highlight {{ entry.content }}
ins.rp-content-highlight {{ entry.content }} .rp-entry-metadata
span(ng-switch-when="delete") Deleted  span {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • 
del.rp-content-highlight {{ entry.content }} span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }}
.rp-entry-actions .rp-entry-actions
a.rp-entry-button(href, ng-click="onReject();") a.rp-entry-button(href, ng-click="onReject();")
i.fa.fa-times i.fa.fa-times

122
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -1,31 +1,31 @@
@rp-base-font-size : 12px; @rp-base-font-size : 12px;
@rp-small-font-size : 10px; @rp-small-font-size : 10px;
@rp-icon-large-size : 22px; @rp-icon-large-size : 22px;
@rp-bg-blue : #dadfed; @rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa; @rp-bg-dim-blue : #fafafa;
@rp-highlight-blue : #8a96b5; @rp-highlight-blue : #8a96b5;
@rp-border-grey : #d9d9d9; @rp-border-grey : #d9d9d9;
@rp-green : #2c8e30; @rp-green : #2c8e30;
@rp-dim-green : #cae3cb; @rp-dim-green : #cae3cb;
@rp-red : #c5060b; @rp-red : #c5060b;
@rp-dim-red : #f3cdce; @rp-dim-red : #f3cdce;
@rp-yellow : #f3b111; @rp-yellow : #f3b111;
@rp-dim-yellow : #ffe9b2; @rp-dim-yellow : #ffe9b2;
@rp-grey : #aaaaaa; @rp-grey : #aaaaaa;
@rp-type-blue : #6b7797; @rp-type-blue : #6b7797;
@rp-type-darkgrey : #3f3f3f; @rp-type-darkgrey : #3f3f3f;
@rp-entry-ribbon-width : 4px; @rp-entry-ribbon-width : 4px;
@rp-entry-arrow-width : 6px; @rp-entry-arrow-width : 6px;
@rp-semibold-weight : 600; @rp-semibold-weight : 600;
@review-panel-width : 230px; @review-panel-width : 230px;
@review-off-width : 22px; @review-off-width : 22px;
@rp-toolbar-height: 32px; @rp-toolbar-height : 32px;
.rp-button() { .rp-button() {
background-color: @rp-highlight-blue; background-color: @rp-highlight-blue;
@ -264,14 +264,13 @@
} }
} }
} }
.rp-entry-body {
.rp-entry-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 3px 5px;
.rp-state-overview & { .rp-state-overview & {
padding: 0px; padding: 0;
} }
} }
.rp-entry-action-icon { .rp-entry-action-icon {
@ -280,48 +279,33 @@
line-height: 0; line-height: 0;
.rp-state-overview & { .rp-state-overview & {
font-size: @rp-base-font-size; display: none;
padding: 0px;
margin-right: 5px;
} }
} }
.rp-entry-metadata { .rp-entry-details {
flex-grow: 1; line-height: 1.4;
padding: 0 5px; margin-left: 5px;
line-height: 1.2;
.rp-state-overview & {
display: flex;
line-height: inherit;
padding: 0;
}
} }
.rp-entry-metadata-line {
margin: 0;
.rp-state-overview &:last-of-type { .rp-entry-metadata {
flex-grow: 1; font-size: @rp-small-font-size;
text-align: right; .rp-state-overview & {
} }
} }
.rp-entry-user {
font-weight: @rp-semibold-weight;
}
.rp-entry-body { .rp-content-highlight {
padding: 5px; color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-state-overview & { .rp-entry-delete & {
padding: 0; text-decoration: line-through;
} }
}
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-entry-delete & {
text-decoration: line-through;
} }
}
.rp-entry-actions { .rp-entry-actions {
display: flex; display: flex;
@ -426,24 +410,6 @@
resize: vertical; resize: vertical;
} }
.rp-avatar {
border-radius: 3px;
font-weight: @rp-semibold-weight;
font-size: @rp-icon-large-size;
line-height: 1.2;
text-transform: uppercase;
color: #FFF;
width: 1.3em;
height: 1.3em;
text-align: center;
flex-grow: 0;
flex-shrink: 0;
.rp-state-overview & {
display: none;
}
}
.rp-icon-delete { .rp-icon-delete {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
@ -524,10 +490,10 @@
padding: 2px 5px; padding: 2px 5px;
border-top: solid 1px @rp-border-grey; border-top: solid 1px @rp-border-grey;
border-bottom: solid 1px @rp-border-grey; border-bottom: solid 1px @rp-border-grey;
background-color: #FFF; background-color: @rp-bg-dim-blue;
margin-top: 10px; margin-top: 10px;
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
border-left: solid @rp-entry-ribbon-width currentColor; text-align: center;
} }
.rp-nav { .rp-nav {