refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/stylesheets/_columns.scss

@@ -0,0 +1,20 @@
+.app-column-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.app-column-first {
+  width: 180px;
+  flex-grow: 0;
+}
+
+.app-column-second {
+  width: 350px;
+  flex-grow: 0;
+}
+
+.app-column-third {
+  flex: 1 50%;
+}
+
+.app-column {}

app/assets/stylesheets/_focused.scss

@@ -35,8 +35,8 @@
     opacity: 1;
   }
 
-  navigation,
-  notes-view {
+  #navigation,
+  #notes-column {
     will-change: opacity;
     animation: fade-out 1.25s forwards;
     transition: width 1.25s;
@@ -45,20 +45,20 @@
     flex: none !important;
   }
 
-  navigation:hover {
+  #navigation:hover {
     flex: initial;
     width: 0px !important;
   }
 
-  notes-view:hover {
+  #notes-column:hover {
     flex: initial;
     width: 0px !important;
   }
 }
 
 .disable-focus-mode {
-  navigation,
-  notes-view {
+  #navigation,
+  #notes-column {
     transition: width 1.25s;
     will-change: opacity;
     animation: fade-in 1.25s forwards;

app/assets/stylesheets/_main.scss

@@ -131,7 +131,6 @@ $footer-height: 2rem;
 .app {
   height: calc(100% - #{$footer-height});
   width: 100%;
-  display: flex;
   vertical-align: top;
   overflow: hidden;
   position: relative;
@@ -176,7 +175,7 @@ $footer-height: 2rem;
     &.collapsed {
       opacity: 1;
       // so it blends in with editor a bit more
-      background-color: var(--sn-stylekit-editor-background-color);
+      // background-color: var(--sn-stylekit-editor-background-color);
     }
 
     &.dragging {

app/assets/stylesheets/_navigation.scss

@@ -6,9 +6,6 @@
 }
 
 #navigation {
-  width: 100%;
-  flex-grow: 0;
-
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;

app/assets/stylesheets/_notes.scss

@@ -1,20 +1,11 @@
 @import './scrollbar';
 
-notes-view {
-  width: 350px;
-}
-
 #notes-column,
 .notes {
-  width: 100%;
-  overflow: visible;
-
   border-left: 1px solid var(--sn-stylekit-border-color);
   border-right: 1px solid var(--sn-stylekit-border-color);
-
   font-size: var(--sn-stylekit-font-size-h2);
-
-  flex-grow: 0;
+  overflow: visible;
   user-select: none;
 
   -moz-user-select: none;
@@ -37,6 +28,7 @@ notes-view {
 
   #notes-title-bar {
     font-weight: normal;
+    overflow: visible;
 
     .section-title-bar-header .title {
       width: calc(90% - 45px);

app/assets/stylesheets/index.css.scss

@@ -15,3 +15,4 @@
 @import 'preferences';
 @import 'focused';
 @import 'sn';
+@import 'columns';