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

12
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' }}
.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  span(ng-switch-when="insert") Added 
ins.rp-content-highlight {{ entry.content }} ins.rp-content-highlight {{ entry.content }}
span(ng-switch-when="delete") Deleted  span(ng-switch-when="delete") Deleted 
del.rp-content-highlight {{ entry.content }} 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 .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

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

@ -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,39 +279,24 @@
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-details {
line-height: 1.4;
margin-left: 5px;
}
.rp-entry-metadata { .rp-entry-metadata {
flex-grow: 1; font-size: @rp-small-font-size;
padding: 0 5px;
line-height: 1.2;
.rp-state-overview & { .rp-state-overview & {
display: flex;
line-height: inherit;
padding: 0;
} }
} }
.rp-entry-metadata-line { .rp-entry-user {
margin: 0; font-weight: @rp-semibold-weight;
.rp-state-overview &:last-of-type {
flex-grow: 1;
text-align: right;
}
} }
.rp-entry-body {
padding: 5px;
.rp-state-overview & {
padding: 0;
}
}
.rp-content-highlight { .rp-content-highlight {
color: @rp-type-darkgrey; color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
@ -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 {