github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -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(
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")
i.fa.fa-pencil(ng-switch-when="insert")
i.rp-icon-delete(ng-switch-when="delete")
.rp-entry-metadata
p.rp-entry-metadata-line(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }}
p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
.rp-avatar(style="background-color: hsl({{ user.hue }}, 70%, 50%);") {{ user.avatar_text | limitTo : 1 }}
.rp-entry-body(ng-switch="entry.type")
span(ng-switch-when="insert") Added 
ins.rp-content-highlight {{ entry.content }}
span(ng-switch-when="delete") Deleted 
del.rp-content-highlight {{ entry.content }}
.rp-entry-details
.rp-entry-description(ng-switch="entry.type")
span(ng-switch-when="insert") Added 
ins.rp-content-highlight {{ entry.content }}
span(ng-switch-when="delete") Deleted 
del.rp-content-highlight {{ entry.content }}
.rp-entry-metadata
span {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • 
span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }}
.rp-entry-actions
a.rp-entry-button(href, ng-click="onReject();")
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-small-font-size : 10px;
@rp-icon-large-size : 22px;
@rp-base-font-size : 12px;
@rp-small-font-size : 10px;
@rp-icon-large-size : 22px;
@rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa;
@rp-highlight-blue : #8a96b5;
@rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa;
@rp-highlight-blue : #8a96b5;
@rp-border-grey : #d9d9d9;
@rp-border-grey : #d9d9d9;
@rp-green : #2c8e30;
@rp-dim-green : #cae3cb;
@rp-red : #c5060b;
@rp-dim-red : #f3cdce;
@rp-yellow : #f3b111;
@rp-dim-yellow : #ffe9b2;
@rp-grey : #aaaaaa;
@rp-green : #2c8e30;
@rp-dim-green : #cae3cb;
@rp-red : #c5060b;
@rp-dim-red : #f3cdce;
@rp-yellow : #f3b111;
@rp-dim-yellow : #ffe9b2;
@rp-grey : #aaaaaa;
@rp-type-blue : #6b7797;
@rp-type-darkgrey : #3f3f3f;
@rp-type-blue : #6b7797;
@rp-type-darkgrey : #3f3f3f;
@rp-entry-ribbon-width : 4px;
@rp-entry-arrow-width : 6px;
@rp-semibold-weight : 600;
@review-panel-width : 230px;
@review-off-width : 22px;
@rp-entry-ribbon-width : 4px;
@rp-entry-arrow-width : 6px;
@rp-semibold-weight : 600;
@review-panel-width : 230px;
@review-off-width : 22px;
@rp-toolbar-height: 32px;
@rp-toolbar-height : 32px;
.rp-button() {
background-color: @rp-highlight-blue;
@ -264,14 +264,13 @@
}
}
}
.rp-entry-header {
.rp-entry-body {
display: flex;
align-items: center;
padding: 5px;
padding: 3px 5px;
.rp-state-overview & {
padding: 0px;
padding: 0;
}
}
.rp-entry-action-icon {
@ -280,48 +279,33 @@
line-height: 0;
.rp-state-overview & {
font-size: @rp-base-font-size;
padding: 0px;
margin-right: 5px;
display: none;
}
}
.rp-entry-metadata {
flex-grow: 1;
padding: 0 5px;
line-height: 1.2;
.rp-state-overview & {
display: flex;
line-height: inherit;
padding: 0;
}
.rp-entry-details {
line-height: 1.4;
margin-left: 5px;
}
.rp-entry-metadata-line {
margin: 0;
.rp-state-overview &:last-of-type {
flex-grow: 1;
text-align: right;
.rp-entry-metadata {
font-size: @rp-small-font-size;
.rp-state-overview & {
}
}
.rp-entry-user {
font-weight: @rp-semibold-weight;
}
.rp-entry-body {
padding: 5px;
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-state-overview & {
padding: 0;
}
}
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-entry-delete & {
text-decoration: line-through;
.rp-entry-delete & {
text-decoration: line-through;
}
}
}
.rp-entry-actions {
display: flex;
@ -426,24 +410,6 @@
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 {
display: inline-block;
line-height: 1;
@ -524,10 +490,10 @@
padding: 2px 5px;
border-top: solid 1px @rp-border-grey;
border-bottom: solid 1px @rp-border-grey;
background-color: #FFF;
background-color: @rp-bg-dim-blue;
margin-top: 10px;
font-weight: @rp-semibold-weight;
border-left: solid @rp-entry-ribbon-width currentColor;
text-align: center;
}
.rp-nav {