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

Adjustments to the folders menu.

Browse source
This commit is contained in:
Paulo Reis 2017-10-05 15:26:49 +01:00
parent 166a0605a3
commit 8b98455674
4 changed files with 80 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/list/side-bar.pug
View file

@ -45,7 +45,7 @@
a(href) #{translate("shared_with_you")}
li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')")
a(href) #{translate("deleted_projects")}
li
li.separator
h2 #{translate("folders")}
li.tag(
ng-repeat="tag in tags | orderBy:'name'",

49
services/web/public/stylesheets/app/project-list.less
View file

@ -95,19 +95,21 @@ ul.folders-menu {
}
> li {
cursor: pointer;
line-height: 1.8;
position: relative;
> a {
line-height: @folders-menu-line-height;
display: block;
font-size: 0.9rem;
color: @sidebar-link-color;
padding: (@line-height-computed / 4) (@grid-gutter-width / 2);
line-height: 1.2;
padding: @folders-menu-item-v-padding (@grid-gutter-width / 2);
border-bottom: solid 1px transparent;
&:hover {
background-color: @sidebar-hover-bg;
text-decoration: @sidebar-hover-text-decoration;
}
}
&.separator {
cursor: auto;
}
}
> li.active {
//border-right: 4px solid @red;
@ -125,10 +127,14 @@ ul.folders-menu {
color: @gray;
}
h2 {
margin-top: @line-height-computed / 2;
margin-bottom: @line-height-computed / 4;
font-size: @font-size-base;
font-weight: 500;
margin-top: @folders-title-margin-top;
margin-bottom: @folders-title-margin-bottom;
font-size: @folders-title-font-size;
color: @folders-title-color;
line-height: @folders-title-line-height;
text-transform: @folders-title-text-transform;
padding: @folders-menu-item-v-padding (@grid-gutter-width / 2);
font-weight: @folders-title-font-weight;
font-family: @font-family-sans-serif;
}
> li.tag {
@ -137,7 +143,7 @@ ul.folders-menu {
color: white;
border-color: white;
&:hover {
background-color: darken(@brand-primary, 10%);
background-color: @folders-tag-menu-active-hover;
}
}
}
@ -145,7 +151,7 @@ ul.folders-menu {
font-style: italic;
margin-bottom: @line-height-computed / 4;
a {
line-height: 1.7;
line-height: @folders-untagged-line-height;
&:hover,
&:focus {
text-decoration: none;
@ -157,7 +163,7 @@ ul.folders-menu {
}
&:hover {
&:not(.active) {
background-color: darken(@gray-lightest, 2%);
background-color: @folders-tag-hover;
}
.tag-menu {
display: block
@ -165,30 +171,30 @@ ul.folders-menu {
}
&:not(.active) {
.tag-menu > a:hover {
background-color: @gray-light;
background-color: @folders-tag-menu-hover;
}
}
a.tag-name {
padding: 2px (@line-height-computed / 4);
margin-right: 18px;
display: inline-block;
padding: @folders-tag-padding;
margin-right: @folders-tag-margin-right;
display: @folders-tag-display;
position: relative;
i {
position: absolute;
position: @folders-tag-icon-position;
top: 5px;
left: 6px;
}
span.name {
display: inline-block;
padding-left: 22px;
padding-left: @folders-tag-spacing;
line-height: 1.4;
}
}
.tag-menu {
> a {
border: 1px solid @gray;
border: 1px solid @folders-tag-border-color;
border-radius: @border-radius-small;
color: @text-color;
color: @folders-tag-menu-color;
display: block;
width: 16px;
height: 16px;
@ -201,7 +207,8 @@ ul.folders-menu {
}
display: none;
position: absolute;
top: 6px;
top: 50%;
margin-top: -8px; // Half the element height.
right: 4px;
&.open {
display: block;
@ -272,7 +279,7 @@ ul.structured-list {
ul.project-list {
li {
line-height: 3;
line-height: @structured-list-line-height;
padding: 0;
// .last-modified, .owner {
// font-size: .8rem;

22
services/web/public/stylesheets/core/_common-variables.less
View file

@ -825,6 +825,28 @@
@sidebar-hover-bg: transparent;
@sidebar-hover-text-decoration: underline;
@structured-list-line-height: inherit;
@folders-menu-line-height: 1.8;
@folders-menu-item-v-padding: (@line-height-computed / 4);
@folders-title-margin-top: @line-height-computed / 2;
@folders-title-margin-bottom: @line-height-computed / 4;
@folders-title-font-size: @font-size-base;
@folders-title-font-weight: 500;
@folders-title-line-height: @headings-line-height;
@folders-title-color: inherit;
@folders-title-text-transform: none;
@folders-tag-icon-position: absolute;
@folders-tag-padding: 2px (@line-height-computed / 4);
@folders-tag-spacing: 22px;
@folders-tag-display: inline-block;
@folders-tag-margin-right: 18px;
@folders-tag-menu-color: @gray;
@folders-tag-hover: darken(@gray-lightest, 2%);
@folders-tag-border-color: @text-color;
@folders-tag-menu-active-hover: darken(@brand-primary, 10%);
@folders-tag-menu-hover: @gray-light;
@folders-untagged-line-height: 1.7;
@btn-border-width: 1px;
@btn-border-bottom-width: 2px;

37
services/web/public/stylesheets/core/ol-variables.less
View file

@ -80,18 +80,18 @@
// Forms
@input-border-radius : unit(@line-height-base, em);
@input-height-base : @line-height-computed + (@padding-base-vertical * 2);
@input-height-base : @line-height-computed + (@padding-base-vertical * 2) - 1;
// TODO Warning color-orange?
@btn-warning-color : #FFF;
@btn-warning-bg : @ol-red;
@btn-warning-border : transparent;
@btn-warning-color : #FFF;
@btn-warning-bg : @ol-red;
@btn-warning-border : transparent;
@btn-danger-color : #FFF;
@btn-danger-bg : @ol-red;
@btn-danger-border : transparent;
@btn-danger-color : #FFF;
@btn-danger-bg : @ol-red;
@btn-danger-border : transparent;
// Cards
@card-box-shadow : none;
@card-box-shadow : none;
// Sidebar
@sidebar-bg : @ol-blue-gray-5;
@ -107,6 +107,27 @@
@structured-list-border-color : @ol-blue-gray-1;
@structured-list-hover-color : lighten(@ol-blue-gray-1, 5%);
@structured-list-line-height : 2.5;
@folders-menu-line-height : @structured-list-line-height;
@folders-menu-item-v-padding : 0;
@folders-title-margin-top : 0;
@folders-title-margin-bottom : 0;
@folders-title-font-weight : normal;
@folders-title-font-size : @font-size-small;
@folders-title-line-height : unit((@font-size-base / @font-size-small) * @folders-menu-line-height);
@folders-title-color : @ol-blue-gray-3;
@folders-title-text-transform : uppercase;
@folders-tag-display : block;
@folders-tag-margin-right : 0;
@folders-tag-icon-position : static;
@folders-tag-padding : @folders-menu-item-v-padding (@grid-gutter-width / 2);
@folders-tag-spacing : 0.5em;
@folders-tag-menu-color : #FFF;
@folders-tag-hover : @sidebar-hover-bg;
@folders-tag-border-color : @folders-tag-menu-color;
@folders-tag-menu-hover : rgba(0, 0, 0, .1);
@folders-tag-menu-active-hover : rgba(0, 0, 0, .1);
@folders-untagged-line-height : @folders-menu-line-height;
//== Colors
//
//## Gray and brand colors for use across Bootstrap.