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

Merge pull request #75 from standardnotes/flexbox

Browse Source 
Flexbox
This commit is contained in:
Mo Bitar
2017-02-16 17:23:51 -06:00
committed by GitHub
parent 25cb99cf84 9c2b121f32
commit 84fdad64d8
14 changed files with 208 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/app/frontend/controllers/editor.js
View File

@@ -46,8 +46,8 @@ angular.module('app.frontend')
}) })
.controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager) { .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager) {
window.addEventListener("message", function(){ window.addEventListener("message", function(event){
console.log("App received message:", event); // console.log("App received message:", event);
if(event.data.status) { if(event.data.status) {
this.postNoteToExternalEditor(); this.postNoteToExternalEditor();
} else { } else {

2
app/assets/javascripts/app/frontend/controllers/home.js
View File

@@ -1,7 +1,5 @@
angular.module('app.frontend') angular.module('app.frontend')
.controller('HomeCtrl', function ($scope, $rootScope, $timeout, modelManager, syncManager, authManager) { .controller('HomeCtrl', function ($scope, $rootScope, $timeout, modelManager, syncManager, authManager) {
$rootScope.bodyClass = "app-body-class";
syncManager.loadLocalItems(function(items) { syncManager.loadLocalItems(function(items) {
$scope.$apply(); $scope.$apply();

42
app/assets/stylesheets/app/_common.scss
View File

@@ -72,45 +72,3 @@
} }
} }
} }
.section-menu {
padding-top: 0px;
width: 100%;
position: absolute;
padding-left: inherit;
padding-right: inherit;
left: 0;
right: 0;
bottom: 0px;
background-color: #f1f1f1;
color: $selected-text-color;
height: 28px;
cursor: default;
ol, ul {
margin-top: 5px;
margin-bottom: 10px;
&.dropdown-menu {
margin-top: 10px;
}
}
ul {
li {
text-align: left;
&.sep {
margin: 6px;
display: block;
}
a {
font-size: 13px;
font-weight: bold;
padding: 0 0;
}
}
}
}

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

@@ -1,5 +1,10 @@
$heading-height: 75px;
.editor { .editor {
width: 60%; flex: 1 50%;
min-width: 300px;
display: flex;
flex-direction: column;
overflow-y: hidden;
&.fullscreen { &.fullscreen {
width: 100%; width: 100%;
@@ -12,187 +17,130 @@
.section-title-bar { .section-title-bar {
border-bottom: none !important; border-bottom: none !important;
height: $heading-height !important;
// &.fullscreen {
// opacity: 0.0;
// -webkit-transition: all 300ms ease-in-out;
// -moz-transition: all 300ms ease-in-out;
// -ms-transition: all 300ms ease-in-out;
// -o-transition: all 300ms ease-in-out;
// transition: all 300ms ease-in-out;
//
// &:hover {
// opacity: 1.0;
// }
}
} }
$heading-height: 100px; .section-menu {
flex: 1 0 28px;
max-height: 28px;
}
}
.editor-heading { .editor-heading {
position: absolute; width: 100%;
width: 100%; padding: 15px;
padding: 15px; padding-top: 0px;
background-color: white;
min-height: $heading-height;
padding-right: 10px;
&.fullscreen {
position: relative;
}
> .title {
font-size: 18px;
font-weight: bold;
padding-top: 0px; padding-top: 0px;
background-color: white;
min-height: $heading-height;
width: 100%; width: 100%;
padding-right: 10px;
&.fullscreen { > .input {
position: relative; float: left;
} text-overflow:ellipsis;
width: 90%;
> .title {
font-size: 18px;
font-weight: bold; font-weight: bold;
padding-top: 0px;
width: 100%;
> .input {
float: left;
text-overflow:ellipsis;
width: 90%;
font-weight: bold;
border: none;
outline: none;
background-color: transparent;
&:disabled {
color: black;
}
}
}
.save-status {
width: 20% !important;
float: right;
position: absolute;
right: 20px;
font-size: 12px;
text-transform: none;
font-weight: normal;
margin-top: 4px;
width: 120px;
text-align: right;
color: rgba(black, 0.23);
}
.tags {
clear: left;
width: 100%;
height: 25px;
.tags-input {
background-color: transparent;
width: 100%;
border: none;
}
}
}
.editor-content {
max-height: 100%;
height: 100%;
clear: both;
min-width: 0;
padding-left: 10px;
padding-right: 10px;
overflow: auto;
text-align: center; // centers children div horizontally
z-index: 10;
padding-top: $heading-height;
&.fullscreen {
padding-top: 0px;
}
.editable {
font-family: monospace;
max-height: 100%;
height: 100%;
width: 100%;
border: none; border: none;
outline: none; outline: none;
padding: 15px; background-color: transparent;
padding-top: 17px;
font-size: 17px;
resize: none;
&.fullscreen { &:disabled {
padding: 85px 10%; color: black;
max-width: 1200px;
display: inline-block;
} }
} }
}
.save-status {
width: 20% !important;
float: right;
position: absolute;
right: 20px;
font-size: 12px;
text-transform: none;
font-weight: normal;
margin-top: 4px;
width: 120px;
text-align: right;
color: rgba(black, 0.23);
}
.tags {
clear: left;
width: 100%;
height: 25px;
.tags-input {
background-color: transparent;
width: 100%;
border: none;
}
}
} }
.nav-tabs { .editor-content {
a { flex: 1;
color: black; z-index: 10;
text-decoration: none; overflow-y: hidden;
height: 100%;
display: flex;
background-color: white;
&.fullscreen {
padding-top: 0px;
} }
a {
background-color: transparent; #editor-iframe {
flex: 1;
width: 100%;
}
.editable {
font-family: monospace;
flex: 1;
overflow-y: scroll;
width: 100%;
border: none;
outline: none;
padding: 15px;
padding-top: 11px;
font-size: 17px;
resize: none;
&.fullscreen {
padding: 85px 10%;
max-width: 1200px;
display: inline-block;
}
} }
} }
.nav { .nav {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
ul {
font-weight: bold;
}
} }
.nav-pills>li {
float: left;
}
.nav>li {
position: relative;
display: block;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff;
background-color: #337ab7;
}
.nav-pills>li>a {
border-radius: 4px;
}
.nav>li>a { .nav>li>a {
position: relative; position: relative;
display: block; display: block;
padding: 10px 15px; font-weight: bold;
} user-select: none;
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.nav>li {
position: relative;
display: block;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: black;
cursor: pointer;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
// border-radius: 4px 4px 0 0;
cursor: pointer;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
} }

1
app/assets/stylesheets/app/_extensions.scss
View File

@@ -42,6 +42,7 @@
> .title { > .title {
font-size: 14px; font-size: 14px;
font-weight: bold;
} }
> .subtitle { > .subtitle {

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

@@ -45,6 +45,7 @@ body {
height: 100%; height: 100%;
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
background-color: $bg-color;
} }
.dark-button { .dark-button {
@@ -80,35 +81,21 @@ p {
min-height: 100vh; min-height: 100vh;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
}
.app-body-class {
height: 100%;
background-color: $bg-color; background-color: $bg-color;
min-width: 100px;
min-width: 900px;
} }
$header-height: 25px; $header-height: 25px;
.app-container {
display: table;
background-color: $bg-color;
width: 100%;
height: calc(100% - #{$header-height});
padding-top: 0px;
font-size: 0;
margin-top: 0;
}
$section-header-height: 70px; $section-header-height: 70px;
.app { .app {
height: 100%; // height: 100%;
height: calc(100% - #{$header-height});
width: 100%; width: 100%;
display: table-row; display: flex;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
position: relative;
.light-button { .light-button {
background-color: $bg-color; background-color: $bg-color;
@@ -127,15 +114,8 @@ $section-header-height: 70px;
.section { .section {
padding-bottom: 0px; padding-bottom: 0px;
display: block;
height: 100%; height: 100%;
max-height: calc(100vh - #{$header-height}); max-height: calc(100vh - #{$header-height});
float: left;
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
font-size: 17px; font-size: 17px;
.scrollable { .scrollable {
@@ -148,7 +128,6 @@ $section-header-height: 70px;
max-height: 100%; max-height: 100%;
background-color: white; background-color: white;
position: relative; position: relative;
box-shadow: 0px 0px 2px rgba(gray, 0.3);
} }
.section-title-bar { .section-title-bar {
@@ -185,3 +164,41 @@ $section-header-height: 70px;
} }
} }
} }
.section-menu {
width: 100%;
padding-top: 0px;
padding-left: 21px;
padding-right: 21px;
background-color: #f1f1f1;
color: $selected-text-color;
height: 28px;
cursor: default;
ol, ul {
margin-top: 5px;
margin-bottom: 10px;
&.dropdown-menu {
margin-top: 10px;
}
}
ul {
li {
text-align: left;
&.sep {
margin: 6px;
display: block;
}
a {
font-size: 13px;
font-weight: bold;
padding: 0 0;
}
}
}
}

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

@@ -1,8 +1,11 @@
.notes { .notes {
width: 25%;
border-left: 1px solid #dddddd; border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd; border-right: 1px solid #dddddd;
flex: 1 20%;
max-width: 350px;
min-width: 170px;
$notes-title-bar-height: 130px; $notes-title-bar-height: 130px;
.notes-title-bar { .notes-title-bar {

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

@@ -1,5 +1,8 @@
.tags { .tags {
width: 15%; // width: 15%;
flex: 1 10%;
max-width: 180px;
min-width: 100px;
$tags-title-bar-height: 55px; $tags-title-bar-height: 55px;

81
app/assets/templates/frontend/editor.html.haml
View File

@@ -1,46 +1,45 @@
.section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"} .section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"}
.content .section-title-bar.editor-heading{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
.section-title-bar.editor-heading{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"} .title
.title %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
%input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)", "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()",
"ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "select-on-click" => "true"}
"select-on-click" => "true"} .save-status{"ng-class" => "{'red bold': ctrl.saveError}", "ng-bind-html" => "ctrl.noteStatus"}
.save-status{"ng-class" => "{'red bold': ctrl.saveError}", "ng-bind-html" => "ctrl.noteStatus"} .tags
.tags %input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && ctrl.updateTagsFromTagsString($event, ctrl.tagsString)",
%input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && ctrl.updateTagsFromTagsString($event, ctrl.tagsString)", "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
"ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"} .section-menu
.section-menu %ul.nav
%ul.nav.nav-pills %li.dropdown.pull-left.mr-10{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
%li.dropdown{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false;"}
%a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false;"} File
File %span.caret
%span.caret %span.sr-only
%span.sr-only
%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} %ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"}
%li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"} %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"}
.text Toggle Fullscreen .text Toggle Fullscreen
.shortcut Cmd + O .shortcut Cmd + O
%li{"ng-click" => "ctrl.deleteNote()"} %li{"ng-click" => "ctrl.deleteNote()"}
.text Delete .text Delete
%li.sep %li.sep
%li.dropdown{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} %li.dropdown.pull-left.mr-10{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
%a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false;"} %a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false;"}
Editor Editor
%span.caret %span.caret
%span.sr-only %span.sr-only
%editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.customEditor"} %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.customEditor"}
%li.sep %li.sep
%li.dropdown{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} %li.dropdown.pull-left{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
%a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false;"} %a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false;"}
Extensions Extensions
%span.caret %span.caret
%span.sr-only %span.sr-only
%contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"} %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
.editor-content{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"} .editor-content{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
%iframe#editor-iframe{"ng-if" => "ctrl.customEditor", "ng-src" => "{{ctrl.customEditor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%; height: 100%; z-index: 1000; float: left;"} %iframe#editor-iframe{"ng-if" => "ctrl.customEditor", "ng-src" => "{{ctrl.customEditor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%;"}
%textarea.editable#note-text-editor{"ng-if" => "!ctrl.customEditor", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text", %textarea.editable#note-text-editor{"ng-if" => "!ctrl.customEditor", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text",
"ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()"} "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()"}

13
app/assets/templates/frontend/home.html.haml
View File

@@ -1,12 +1,11 @@
.main-ui-view .main-ui-view
.app-container .app
.app %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag",
%tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag", "tags" => "tags"}
"tags" => "tags"}
%notes-section{"remove-tag" => "notesRemoveTag", "add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", %notes-section{"remove-tag" => "notesRemoveTag", "add-new" => "notesAddNew", "selection-made" => "notesSelectionMade",
"tag" => "selectedTag", "remove" => "deleteNote"} "tag" => "selectedTag", "remove" => "deleteNote"}
%editor-section{"ng-if" => "selectedNote", "note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"} %editor-section{"ng-if" => "selectedNote", "note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"}
%header %header

6
app/assets/templates/frontend/layouts/about.html.haml
View File

@@ -1,6 +0,0 @@
.about.animated.fadeIn
.title About
.summary Namewhale helps you find a unique name for your startup. Using an intelligent, seed-based algorithm, names are generated based on the sound, style, and feel of the seed words you chose.
.links
%a{"href" => "https://itunes.apple.com/us/app/namewhale/id1028881375?ls=1&mt=8", "target" => "_blank"} Namewhale on the AppStore
%a{"href" => "https://twitter.com/namewhale", "target" => "_blank"} @namewhale

4
app/assets/templates/frontend/layouts/footer.html.haml
View File

@@ -1,4 +0,0 @@
%footer.footer{"ng-class" => "footerClass"}
.container
.row
.footer-about-section

2
app/views/application/frontend.html.erb
View File

@@ -37,7 +37,7 @@
</head> </head>
<body ng-class="bodyClass"> <body>
<div ui-view="content"></div> <div ui-view="content"></div>
</body> </body>

8
test/javascripts/controllers/HomeCtrl_spec.js
View File

@@ -3,7 +3,7 @@ describe("app.frontend", function() {
beforeEach(module('app.frontend')); beforeEach(module('app.frontend'));
describe('Home Controller', function() { describe('Home Controller', function() {
var scope; var scope;
beforeEach(inject(function($rootScope, $controller, modelManager) { beforeEach(inject(function($rootScope, $controller, modelManager) {
scope = $rootScope.$new(); scope = $rootScope.$new();
@@ -13,10 +13,6 @@ describe("app.frontend", function() {
}); });
})); }));
it('should have a body class', function() {
expect(scope.bodyClass).toEqual('app-body-class');
});
it('should have an All tag', function() { it('should have an All tag', function() {
expect(scope.allTag).toBeDefined(); expect(scope.allTag).toBeDefined();
expect(scope.allTag.title).toEqual("All"); expect(scope.allTag.title).toEqual("All");
@@ -31,7 +27,7 @@ describe("app.frontend", function() {
scope.tagsAddNew("testTag"); scope.tagsAddNew("testTag");
expect($modelManager.items).toContain("testTag"); expect($modelManager.items).toContain("testTag");
}); });
}); });
}); });