Merge pull request #2 from JimmyLv/calendar

merge new feature: Calendar View
JimmyLv · Dec 30, 2020 · 05704f1 · 05704f1
2 parents bf911b1 + d91d716
commit 05704f1
Show file tree

Hide file tree

Showing 38 changed files with 6,493 additions and 253 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
 .idea/
+.cache/
+dist/
+*.log
+node_modules
diff --git a/css/card.css b/css/card.css
@@ -10,8 +10,13 @@
 .edit-mode .roam-topbar {
   box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.06);
 }
-.card-mode .roam-center > div,
-.edit-mode .roam-center > div {
+.card-mode .roam-body-main > div:first-child,
+.edit-mode .roam-body-main > div:first-child {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.card-mode .roam-body-main > div,
+.edit-mode .roam-body-main > div {
   padding: 0 !important;
 }
 .card-mode body,
@@ -27,14 +32,14 @@
   box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.06), inset -3px -3px 6px 0px #fff !important;
   border-radius: 8px !important;
 }
-.card-mode [style="margin-left: -27px;"],
-.edit-mode [style="margin-left: -27px;"] {
+.card-mode .rm-block__children.rm-level-0,
+.edit-mode .rm-block__children.rm-level-0 {
   flex-direction: row;
   flex-flow: row;
   overflow-x: scroll;
 }
-.card-mode [style="margin-left: -27px;"] > .roam-block-container,
-.edit-mode [style="margin-left: -27px;"] > .roam-block-container,
+.card-mode .rm-block__children.rm-level-0 > .roam-block-container,
+.edit-mode .rm-block__children.rm-level-0 > .roam-block-container,
 .card-mode [style="margin-left: -20px;"] > .roam-block-container,
 .edit-mode [style="margin-left: -20px;"] > .roam-block-container {
   box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.06), -8px -8px 16px 0px #fff;
@@ -50,21 +55,19 @@
 .edit-mode [style="margin-left: -20px;"] > .roam-block-container {
   max-width: 740px;
 }
-.card-mode [style="margin-left: -27px;"] > .roam-block-container > [style="margin-left: 20px;"] > .roam-block-container,
-.edit-mode [style="margin-left: -27px;"] > .roam-block-container > [style="margin-left: 20px;"] > .roam-block-container {
+.card-mode .rm-block__children.rm-level-0 > .roam-block-container > [style="margin-left: 20px;"] > .roam-block-container,
+.edit-mode .rm-block__children.rm-level-0 > .roam-block-container > [style="margin-left: 20px;"] > .roam-block-container {
   box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.06), inset -3px -3px 6px 0px #fff;
   border-radius: 8px;
   background: #f2f4f8;
   padding: 6px 10px 10px 0;
   min-height: 200px;
   margin: 10px;
 }
-.card-mode [style="margin-left: -27px;"] .rm-resize-img.react-resizable,
-.edit-mode [style="margin-left: -27px;"] .rm-resize-img.react-resizable,
-.card-mode [style="margin-left: -27px;"] .hoverparent.rm-resize-img,
-.edit-mode [style="margin-left: -27px;"] .hoverparent.rm-resize-img,
-.card-mode [style="margin-left: -27px;"] svg,
-.edit-mode [style="margin-left: -27px;"] svg {
+.card-mode .rm-block__children.rm-level-0 img.rm-inline-img,
+.edit-mode .rm-block__children.rm-level-0 img.rm-inline-img,
+.card-mode .rm-block__children.rm-level-0 svg,
+.edit-mode .rm-block__children.rm-level-0 svg {
   max-width: 270px !important;
 }
 .card-mode [style="margin-left: -20px;"] .rm-block-text,
@@ -83,32 +86,38 @@
 }
 span[data-link-title="{"] > span,
 span[data-link-title="}"] > span {
-  color: #DDDCDC !important;
+  color: #dddcdc !important;
 }
 code {
   margin-left: 2px;
   border: none;
-  background-image: linear-gradient(to right, #F67280, #F8B195);
-}
-button.mode-button {
-  border-radius: 8px;
-  letter-spacing: -0.5px;
-  padding: 0 30px 2px;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  text-align: center;
-  font-weight: 700;
-  background: #f2f4f8;
-  font-size: 14px;
-  color: #000;
-  height: 30px;
-  text-rendering: optimizeSpeed;
-  text-decoration: none;
-  list-style: none;
-  outline: none;
-  border: none;
-  margin-right: 8px;
-}
-button.mode-button:hover {
-  color: #808c99;
+  background-image: linear-gradient(to right, #f67280, #f8b195);
+}
+@media (max-width: 480px) {
+  /* smartphones, Android phones, landscape iPhone */
+  #mode-button-cardFlow,
+  #mode-button-cardList {
+    display: none;
+  }
+}
+.document-mode #mode-button-document,
+.card-mode #mode-button-cardList,
+.flow-mode #mode-button-cardFlow {
+  background: rgba(167, 182, 194, 0.3);
+}
+.document-mode .roam-block-container,
+.card-mode .roam-block-container,
+.flow-mode .roam-block-container {
+  max-width: none;
+}
+.document-mode .roam_navigator_hint,
+.card-mode .roam_navigator_hint,
+.flow-mode .roam_navigator_hint {
+  position: relative !important;
+}
+.document-mode .rm-title-display .roam_navigator_hint,
+.card-mode .rm-title-display .roam_navigator_hint,
+.flow-mode .rm-title-display .roam_navigator_hint {
+  display: inline-block;
+  margin-right: 14px;
 }
diff --git a/css/dark.css b/css/dark.css
@@ -45,7 +45,7 @@
     background: var(--main-background-color) !important;
   }
 
-  .roam-center {
+  .roam-body-main {
     border-left: 1px solid var(--border-color) !important;
     border-top: 1px solid var(--border-color) !important;
     border-right: 1px solid var(--border-color) !important;
@@ -57,7 +57,7 @@
     margin-left: 12px;
   }
 
-  .roam-center > div:first-child {
+  .roam-body-main > div:first-child {
     padding-right: calc(0.5 * (100% - 820px)) !important;
     padding-left: calc(0.5 * (100% - 820px)) !important;
   }

diff --git a/css/gingko.css b/css/gingko.css
@@ -1,54 +1,58 @@
-.chain-mode body {
+.flow-mode body {
   background: #f2f4f8;
 }
-.chain-mode #rm-log-container {
+.flow-mode #rm-log-container {
   padding: 0 !important;
 }
-.chain-mode .block-highlight-blue {
+.flow-mode .block-highlight-blue {
   background-color: #f0bd66;
 }
-.chain-mode .roam-center > div {
+.flow-mode .roam-body-main > div {
   padding: 0 !important;
 }
-.chain-mode .roam-article > div:first-child .flex-v-box.roam-block-container.block-bullet-view {
+.flow-mode .roam-article > div:first-child .roam-block-container.block-bullet-view {
   flex-direction: row;
   width: 400px;
 }
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"],
-.chain-mode .roam-article > div:first-child [style="margin-left: -20px;"] {
+.flow-mode .roam-article > div:first-child .rm-block__children.rm-level-0,
+.flow-mode .roam-article > div:first-child [style="margin-left: -20px;"] {
   overflow-x: auto;
   padding-bottom: 10px;
 }
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"] > .roam-block-container {
+.flow-mode .roam-article > div:first-child .rm-block__children.rm-level-0 > .roam-block-container {
   width: 100vw !important;
 }
-.chain-mode .roam-article > div:first-child .flex-h-box.flex-align-start.flex-justify-start {
+.flow-mode .roam-article > div:first-child .rm-block-main.rm-block__self {
   width: 370px;
-  min-height: 100px;
+  height: 200px;
   margin: 20px;
   box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.06), -8px -8px 16px 0px #fff;
   border-radius: 8px;
   background: #f2f4f8;
   padding: 20px 16px 16px 0;
 }
-.chain-mode .roam-article > div:first-child .block-highlight-blue .flex-h-box.flex-align-start.flex-justify-start {
+.flow-mode .roam-article > div:first-child .rm-block-main.rm-block__self:hover {
+  box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.06), inset -3px -3px 6px 0px #fff;
+}
+.flow-mode .roam-article > div:first-child .block-highlight-blue .rm-block-main.rm-block__self {
   box-shadow: none;
 }
-.chain-mode .roam-article > div:first-child .controls + div {
-  box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.06), inset -3px -3px 6px 0px #fff;
-  border-radius: 8px;
-  background: #f2f4f8;
-  min-height: 160px;
-  padding: 6px 10px 10px;
+.flow-mode .roam-article > div:first-child .controls + div {
+  /*      box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.06), inset -3px -3px 6px 0px #fff;
+      border-radius: 8px;
+      background: #f2f4f8;
+      min-height: 160px;
+      padding: 6px 10px 10px;*/
+  height: 160px;
+  overflow: scroll;
 }
-.chain-mode .roam-article > div:first-child [style="margin-left: 20px;"] {
+.flow-mode .roam-article > div:first-child [style="margin-left: 20px;"] {
   margin-left: 400px !important;
 }
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"] .rm-resize-img.react-resizable,
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"] .hoverparent.rm-resize-img,
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"] svg {
+.flow-mode .roam-article > div:first-child .rm-block__children.rm-level-0 img.rm-inline-img,
+.flow-mode .roam-article > div:first-child .rm-block__children.rm-level-0 svg {
   max-width: 294px !important;
 }
-.chain-mode .roam-article > div:first-child [style="margin-left: -27px;"] .kanban-board {
+.flow-mode .roam-article > div:first-child .rm-block__children.rm-level-0 .kanban-board {
   max-width: 320px !important;
 }
diff --git a/css/misc.css b/css/misc.css
@@ -64,10 +64,10 @@ div.slider {
 }
 
 /* */
-.roam-center > div[style*="width: 100%; height: 100%;"] {
+.roam-body-main > div[style*="width: 100%; height: 100%;"] {
   width: var(--article-width) !important;
 }
-.roam-center > div[style*="width: 100%; height: 100%;"] > div {
+.roam-body-main > div[style*="width: 100%; height: 100%;"] > div {
   position: fixed !important;
   top: 0; left: 0;
   width: 100vw !important;
@@ -296,7 +296,7 @@ canvas[data-id="layer2-node"] {
 
 
 
-.roam-center > div > div > div svg {
+.roam-body-main > div > div > div svg {
   background-color: var(--bg-color) !important;
 }
 

diff --git a/css/sidebar.css b/css/sidebar.css
@@ -42,7 +42,7 @@
   justify-content: flex-end;
 }
 
-.roam-center > div:first-child {
+.roam-body-main > div:first-child {
   padding: 0 !important;
 }
 .roam-body-main > * {
@@ -537,11 +537,11 @@ body > .bp3-portal .bp3-text-small {
   border-color: var(--bg-color) !important;
 }
 
-.roam-center svg > g > rect:first-child, #roam-right-sidebar-content > div svg  > g > rect:first-child {
+.roam-body-main svg > g > rect:first-child, #roam-right-sidebar-content > div svg  > g > rect:first-child {
   display: none;
 }
 
-.roam-center svg > g > foreignObject, #roam-right-sidebar-content > div svg > g > foreignObject {
+.roam-body-main svg > g > foreignObject, #roam-right-sidebar-content > div svg > g > foreignObject {
   background-color: var(--page-color);
   border-radius: 8px;
   filter: drop-shadow( 0px 4px 6px rgba(0, 0, 0, .05));
@@ -550,35 +550,35 @@ body > .bp3-portal .bp3-text-small {
 
 /* SELECTION */
 
-.roam-center svg > g > rect[stroke="red"] + foreignObject,
+.roam-body-main svg > g > rect[stroke="red"] + foreignObject,
 #roam-right-sidebar-content > div svg > g > rect[stroke="red"] + foreignObject {
   border-color: rgb(var(--color-secondary));
 }
 
-.roam-center svg > g > rect[style*="stroke: red"] + foreignObject,
+.roam-body-main svg > g > rect[style*="stroke: red"] + foreignObject,
 #roam-right-sidebar-content > div svg > g > rect[style*="stroke: red"] + foreignObject{
   border-color: rgb(var(--color-secondary));
 
 }
 
-.roam-center svg > g > rect[style*="rgba"] + foreignObject,
+.roam-body-main svg > g > rect[style*="rgba"] + foreignObject,
 #roam-right-sidebar-content > div svg > g > rect[style*="rgba"] + foreignObject{
   background-color: rgba(255, 255, 255, 0.4)
 }
 
-.roam-center svg > g > foreignObject > input:first-child,
+.roam-body-main svg > g > foreignObject > input:first-child,
 #roam-right-sidebar-content > div svg > g > foreignObject > input:first-child{
   background-color: rgb(var(--color-primary)) !important;
   color: var(--color-primary-contrast);
   height: 30px;
 }
 
-.roam-center svg > line[style*="stroke: red"],
+.roam-body-main svg > line[style*="stroke: red"],
 #roam-right-sidebar-content > div svg > line[style*="stroke: red"]{
   stroke: rgb(var(--color-secondary)) !important;
 }
 
-.roam-center svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"],
+.roam-body-main svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"],
 #roam-right-sidebar-content > div svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"]{
   fill: rgba(var(--color-secondary), 0.5) !important;
   stroke: rgb(var(--color-secondary)) !important;

diff --git a/images/file-text.svg b/images/file-text.svg
diff --git a/images/list.svg b/images/list.svg
diff --git a/js/cardify.js b/js/cardify.js