rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resizable panels and user prefs

Browse Source
This commit is contained in:
Mo Bitar
2017-12-27 12:17:29 -06:00
parent 38f2e345d9
commit 8c15438d00
16 changed files with 603 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/app/_editor.scss
View File

@@ -1,21 +1,11 @@
$heading-height: 75px;
.editor {
flex: 1 50%;
min-width: 300px;
display: flex;
flex-direction: column;
overflow-y: hidden;
background-color: white;
&.fullscreen {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 200;
padding: 0;
}
.section-menu-bar {
flex: 1 0 28px;
max-height: 28px;
@@ -37,10 +27,6 @@ $heading-height: 75px;
height: auto;
overflow: visible;
&.fullscreen {
position: relative;
}
> .title {
font-size: 18px;
font-weight: bold;
@@ -103,7 +89,7 @@ $heading-height: 75px;
}
}
.editor-content {
.editor-content, #editor-content {
flex: 1;
z-index: 10;
overflow-y: hidden;
@@ -111,9 +97,7 @@ $heading-height: 75px;
display: flex;
background-color: white;
&.fullscreen {
padding-top: 0px;
}
position: relative;
#editor-iframe {
flex: 1;
@@ -122,7 +106,6 @@ $heading-height: 75px;
.editable {
font-family: monospace;
flex: 1;
overflow-y: scroll;
width: 100%;
@@ -132,14 +115,6 @@ $heading-height: 75px;
padding-top: 11px;
font-size: 17px;
resize: none;
&.fullscreen {
padding: 85px 10%;
max-width: 1200px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
}
}

90
app/assets/stylesheets/app/_main.scss
View File

@@ -110,10 +110,7 @@ p {
$footer-height: 25px;
$section-header-height: 70px;
.app {
// height: 100%;
height: calc(100% - #{$footer-height});
width: 100%;
display: flex;
@@ -136,11 +133,48 @@ $section-header-height: 70px;
}
}
panel-resizer {
top: 0;
right: 0;
z-index: 1;
width: 8px;
height: 100%;
position: absolute;
cursor: col-resize;
background-color: rgb(224, 224, 224);
opacity: 0;
&.left {
left: 0;
right: none;
}
&.always-visible {
opacity: 1;
}
&.collapsed {
opacity: 1;
}
&.dragging {
opacity: 1;
}
&.hoverable {
&:hover {
opacity: 1;
}
}
}
.section {
padding-bottom: 0px;
height: 100%;
max-height: calc(100vh - #{$footer-height});
font-size: 17px;
position: relative;
overflow: hidden;
.scrollable {
overflow-y: auto;
@@ -155,34 +189,40 @@ $section-header-height: 70px;
}
.section-title-bar {
padding: 20px;
height: $section-header-height;
font-weight: bold;
font-size: 14px;
> .title {
float: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
overflow: hidden;
.padded {
padding: 0 14px;
}
> .add-button {
float: right;
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: #e9e9e9;
border-radius: 4px;
font-weight: normal;
text-align: center;
position: absolute;
right: 12px;
.section-title-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
&:hover {
background-color: rgba(#e9e9e9, 0.8);
> .title {
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
overflow: hidden;
}
> .add-button {
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: #e9e9e9;
border-radius: 4px;
font-weight: normal;
text-align: center;
&:hover {
background-color: rgba(#e9e9e9, 0.8);
}
}
}
}

30
app/assets/stylesheets/app/_menus.scss
View File

@@ -4,6 +4,11 @@ ul.section-menu-bar {
padding-left: 6px;
padding-right: 21px;
&.no-h-padding {
padding-left: 0px;
padding-right: 0px;
}
user-select: none;
background-color: #f1f1f1;
@@ -29,6 +34,7 @@ ul.section-menu-bar {
&.full-width {
width: 100%;
padding-left: 14px;
}
&.item-with-subtitle {
@@ -43,14 +49,14 @@ ul.section-menu-bar {
font-weight: normal;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 1; /* number of lines to show */
// $line-height: 18px;
// line-height: $line-height; /* fallback */
// max-height: calc(#{$line-height} * 1); /* fallback */
}
}
@@ -79,9 +85,15 @@ ul.section-menu-bar {
border: none;
width: 280px;
&.full-width {
width: 100%;
}
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 50px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background-color: white;
color: $selected-text-color;

29
app/assets/stylesheets/app/_notes.scss
View File

@@ -1,21 +1,23 @@
.notes {
#notes-column, .notes {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
flex: 1 20%;
max-width: 350px;
min-width: 170px;
width: 350px;
flex-grow: 0;
user-select: none;
$notes-title-bar-height: 148px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
.content {
display: flex;
flex-direction: column;
}
#notes-title-bar {
color: rgba(black, 0.40);
padding-top: 16px;
padding-left: 14px;
padding-right: 14px;
height: $notes-title-bar-height;
font-weight: normal;
font-size: 18px;
@@ -25,21 +27,20 @@
}
#notes-add-button {
right: 14px;
}
#notes-menu-bar {
position: relative;
margin: 0 -14px;
margin-top: 14px;
height: 45px;
height: auto;
width: auto;
}
.filter-section {
clear: left;
height: 32px;
margin-top: 20px;
margin-top: 14px;
position: relative;
.filter-bar {
@@ -80,7 +81,7 @@
}
.scrollable {
height: calc(100vh - (#{$notes-title-bar-height} + #{$footer-height}));
height: 100%;
}
.infinite-scroll {

25
app/assets/stylesheets/app/_tags.scss
View File

@@ -1,21 +1,20 @@
.tags {
flex: 1 10%;
max-width: 180px;
min-width: 100px;
width: 180px;
background-color: #f6f6f6;
user-select: none;
flex-grow: 0;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
$tags-title-bar-height: 55px;
#tags-title-bar {
color: black;
height: $tags-title-bar-height;
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
color: rgba(black, 0.8);
color: black;
height: $tags-title-bar-height;
padding-top: 14px;
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
color: rgba(black, 0.8);
}
#tags-content {
@@ -23,9 +22,7 @@
}
#tag-add-button {
margin-top: -6px;
background-color: #d7d7d7;
float: right;
&:hover {
background-color: rgba(#d7d7d7, 0.8);