Commit aaf84ca1 authored by arturo's avatar arturo

[sidebar] sidebar visibility issues

* Issue #293
* Issue #313
* Issue #316
parent fbd967ad
Pipeline #1665 canceled with stage
......@@ -11,7 +11,7 @@
<style> * {margin: 0; padding: 0; list-style: none;} </style>
</head>
<body>
<div id="app" class ="container-fluid"></div>
<div id="app"></div>
<div id="portal"></div>
<script src="bundle.js"></script>
</body>
......
......@@ -9993,6 +9993,28 @@ h3 {
border-color: rgba(255, 255, 255, 0.3);
}
}
.with-icon-font {
font-family: ForkAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.right-handed .forest-layout {
border-right: 1px solid #000;
}
.right-handed .forest-layout:hover {
border-right: 1px solid #dee2e6;
}
.left-handed .forest-layout {
border-left: 1px solid #000;
}
.left-handed .forest-layout:hover {
border-left: 1px solid #dee2e6;
}
.forest-layout-teaser {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
}
.navbar-dark.bg-primary {
background-color: #111111 !important;
}
......
......@@ -9949,4 +9949,22 @@ h3 {
font-family: ForkAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.right-handed .forest-layout {
border-right: 1px solid #fff;
}
.right-handed .forest-layout:hover {
border-right: 1px solid #dee2e6;
}
.left-handed .forest-layout {
border-left: 1px solid #fff;
}
.left-handed .forest-layout:hover {
border-left: 1px solid #dee2e6;
}
.forest-layout-teaser {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
}
/*# sourceMappingURL=bootstrap-default.css.map */
......@@ -9701,5 +9701,26 @@ h3 {
border-color: #dee2e6;
}
}
.with-icon-font {
font-family: ForkAwesome, Muli;
}
.right-handed .forest-layout {
border-right: 1px solid #fff;
}
.right-handed .forest-layout:hover {
border-right: 1px solid #dee2e6;
}
.left-handed .forest-layout {
border-left: 1px solid #fff;
}
.left-handed .forest-layout:hover {
border-left: 1px solid #dee2e6;
}
.forest-layout-teaser {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
}
/*# sourceMappingURL=bootstrap-greyson.css.map */
......@@ -9933,5 +9933,26 @@ h3 {
border-color: #dee2e6;
}
}
.with-icon-font {
font-family: ForkAwesome, Nunito;
}
.right-handed .forest-layout {
border-right: 1px solid #fff;
}
.right-handed .forest-layout:hover {
border-right: 1px solid #dee2e6;
}
.left-handed .forest-layout {
border-left: 1px solid #fff;
}
.left-handed .forest-layout:hover {
border-left: 1px solid #dee2e6;
}
.forest-layout-teaser {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
}
/*# sourceMappingURL=bootstrap-herbie.css.map */
......@@ -9950,5 +9950,26 @@ h3 {
border-color: #dee2e6;
}
}
.with-icon-font {
font-family: ForkAwesome, Montserrat;
}
.right-handed .forest-layout {
border-right: 1px solid #fff;
}
.right-handed .forest-layout:hover {
border-right: 1px solid #dee2e6;
}
.left-handed .forest-layout {
border-left: 1px solid #fff;
}
.left-handed .forest-layout:hover {
border-left: 1px solid #dee2e6;
}
.forest-layout-teaser {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
}
/*# sourceMappingURL=bootstrap-monotony.css.map */
......@@ -4,6 +4,14 @@
/* padding-top: 15px */
/* padding-bottom: 15px */
/* float: none */
#dafixedtop {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 910;
}
#corporatop.nav-tabs > li {
padding-left: 1;
padding-right: 1;
......@@ -170,10 +178,6 @@
top: 50px;
}
#dafixedtop {
z-index: 910;
}
#logo-designed {
border: 15px;
}
......@@ -183,7 +187,10 @@
}
#page-wrapper {
margin-top: 96px;
padding-top: 40px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
}
#user-page-header {
......@@ -385,7 +392,7 @@ li .leaf:hover a.settings {
visibility: visible;
}
.forest > .tree {
.forest-layout-content > .tree {
margin-top: 20px;
}
......@@ -518,6 +525,9 @@ li .leaf:hover a.settings {
opacity: var(--over50, 0);
}
#node-popup-tooltip {
position: fixed;
}
#node-popup-tooltip .tree .node {
margin-top: 5px;
}
......@@ -525,6 +535,18 @@ li .leaf:hover a.settings {
padding-left: 15px;
}
.right-handed #node-popup-tooltip {
top: 50%;
left: 16.6666666667%;
transform: translateY(-50%);
}
.left-handed #node-popup-tooltip {
top: 50%;
right: 16.6666666667%;
transform: translateY(-50%);
}
.panel-actions .almost-useable {
color: orange;
}
......@@ -540,20 +562,51 @@ li .leaf:hover a.settings {
overflow-y: scroll;
}
.forest-layout-wrapper {
padding-left: 0;
padding-right: 0;
}
.forest-layout {
background-color: #fff;
position: fixed;
top: 3.7em;
width: 15%;
padding-top: 8px;
z-index: 909;
position: fixed;
height: calc(100vh - 56px);
width: 100%;
max-width: inherit;
scrollbar-width: none;
overflow-y: scroll;
overflow-x: visible;
transition: border 150ms;
}
.forest-layout::-webkit-scrollbar {
display: none;
}
.forest-layout-teaser {
pointer-events: none;
position: fixed;
bottom: 0;
height: 24px;
width: calc(16.6666666667% - 1px);
}
.right-handed .forest-layout-teaser {
left: 0;
}
.left-handed .forest-layout-teaser {
right: 0;
}
.left-handed .forest-layout {
left: 80%;
padding-left: 8px;
padding-right: 16px;
}
.right-handed .forest-layout {
left: 2%;
padding-left: 16px;
padding-right: 8px;
}
.code-editor .editor .code-area {
......@@ -777,6 +830,20 @@ ul li {
padding-top: 100px;
}
#app {
width: 100%;
}
.router-inner {
display: flex;
}
.router-inner.left-handed {
flex-direction: row;
}
.router-inner.right-handed {
flex-direction: row;
}
.range {
width: 400px;
/* some space for the right knob */
......
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACtFJ;EAEE;;;AAQF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;ACnKA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;ACrDF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;;AAGE;EACE;;AAEA;EACE;;;AAUR;EAEE;EACA,MAFW;EAGX;;;AAEF;EAEE;EACA,OAFW;EAGX;;;AAGA;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AACF;EAEE;EACA;;;AAEF;EAGE;EACA;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AASJ;EAKE;EACA;EACA;EACA,QAPS;EAQT;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACI;EACA;;;AACJ;EACI;EACA;;;AChPA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;ACnHJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
......@@ -13,7 +13,7 @@
<style> * {margin: 0; padding: 0; list-style: none;} </style>
</head>
<body>
<div id="app" class ="container-fluid"></div>
<div id="app"></div>
<div id="portal"></div>
<script src="bundle.js"></script>
</body>
......
......@@ -40,7 +40,6 @@ type Props =
, reloadForest :: T2.ReloadS
, sessions :: T.Box Sessions
, showLogin :: T.Box Boolean
, showTree :: T.Box Boolean
, tasks :: T.Box GAT.Storage
| Common
)
......@@ -63,7 +62,6 @@ forestCpt = here.component "forest" cpt where
, route
, sessions
, showLogin
, showTree
, tasks } _ = do
-- TODO Fix this. I think tasks shouldn't be a Box but only a Reductor
-- tasks' <- GAT.useTasks reloadRoot reloadForest
......@@ -75,11 +73,9 @@ forestCpt = here.component "forest" cpt where
-- reloadRoot' <- T.useLive T.unequal reloadRoot
-- route' <- T.useLive T.unequal route
showTree' <- T.useLive T.unequal showTree
-- TODO If `reloadForest` is set, `reload` state should be updated
-- TODO fix tasks ref
pure $ H.div { className: "forest " <> if showTree' then "" else "d-none" }
pure $ H.div { className: "forest-layout-content" }
(A.cons (plus { backend, handed, showLogin }) (trees handed' sessions'))
where
common = RX.pick props :: Record Common
......@@ -108,7 +104,7 @@ plusCpt = here.component "plus" cpt where
cpt { backend, handed, showLogin } _ = do
handed' <- T.useLive T.unequal handed
pure $ H.div { className: "row" }
pure $ H.div {}
[ H.button { className: buttonClass handed'
, on: { click }
, title }
......@@ -128,12 +124,20 @@ plusCpt = here.component "plus" cpt where
title = "Add or remove connections to the server(s)."
divClass = "fa fa-universal-access"
buttonClass handed' =
"btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'
"btn btn-primary d-block " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'
forestLayout :: R2.Component Props
forestLayout = R.createElement forestLayoutCpt
forestLayoutCpt :: R.Component Props
forestLayoutCpt = here.component "forestLayout" cpt where
cpt p _ = do
pure $ H.div { className: "forest-layout" }
[ forest p [] ]
cpt p _ = pure $
H.div { className: "forest-layout-wrapper col-md-2" }
[
H.div { className: "forest-layout" }
[
forest p []
,
H.div { className: "forest-layout-teaser" } []
]
]
......@@ -2,15 +2,11 @@ module Gargantext.Components.MainPage where
import Gargantext.Prelude
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
import Web.HTML.Event.EventTypes (offline)
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Routes as GR
import Gargantext.Types as GT
import Gargantext.Utils.Reactix as R2
here :: R2.Here
......@@ -31,17 +27,9 @@ mainPageCpt = here.component "mainPage" cpt
handed' <- T.useLive T.unequal handed
route' <- T.useLive T.unequal route
let classNameOffsetPre /\ className /\ classNameOffsetPost = case route' of
GR.PGraphExplorer _ _ -> "" /\ "col-md-12" /\ ""
_ -> case handed' of
GT.LeftHanded -> "" /\ "col-md-10" /\ "col-md-2"
GT.RightHanded -> "col-md-2" /\ "col-md-10" /\ ""
pure $ H.div { className: "row" }
[ H.div { className: classNameOffsetPre } []
, H.div { className }
[ H.div { id: "page-wrapper" }
[ H.div { className: "container-fluid" } children ]
]
, H.div { className: classNameOffsetPost } []
pure $
H.div { id: "page-wrapper" }
[
H.div { className: "container-fluid" } children
]
......@@ -5,12 +5,6 @@ import Gargantext.Prelude
import Data.Array as A
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Record as Record
import Record.Extra as RE
import Toestand as T
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Components.Footer (footer)
import Gargantext.Components.Forest as Forest
......@@ -26,8 +20,8 @@ import Gargantext.Components.Nodes.Annuaire.User (userLayout)
import Gargantext.Components.Nodes.Annuaire.User.Contact (contactLayout)
import Gargantext.Components.Nodes.Corpus (corpusLayout)
import Gargantext.Components.Nodes.Corpus.Dashboard (dashboardLayout)
import Gargantext.Components.Nodes.Corpus.Phylo (phyloLayout)
import Gargantext.Components.Nodes.Corpus.Document (documentMainLayout)
import Gargantext.Components.Nodes.Corpus.Phylo (phyloLayout)
import Gargantext.Components.Nodes.File (fileLayout)
import Gargantext.Components.Nodes.Frame (frameLayout)
import Gargantext.Components.Nodes.Home (homeLayout)
......@@ -42,6 +36,11 @@ import Gargantext.Sessions (Session, WithSession)
import Gargantext.Sessions as Sessions
import Gargantext.Types (CorpusId, Handed(..), ListId, NodeID, NodeType(..), SessionId, SidePanelState(..), reverseHanded)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Record as Record
import Record.Extra as RE
import Toestand as T
here :: R2.Here
......@@ -58,7 +57,7 @@ router :: R2.Leaf Props
router props = R.createElement routerCpt props []
routerCpt :: R.Component Props
routerCpt = here.component "router" cpt where
cpt { boxes: boxes@{ handed } } _ = do
cpt { boxes: boxes@{ handed, showTree } } _ = do
handed' <- T.useLive T.unequal handed
let handedClassName = case handed' of
......@@ -68,7 +67,7 @@ routerCpt = here.component "router" cpt where
pure $ R.fragment
([ loginModal { boxes }
, topBar { boxes } ] <>
[ H.div { className: handedClassName } $ reverseHanded handed' $
[ H.div { className: handedClassName <> " router-inner" } $ reverseHanded handed' $
[ forest { boxes }
, mainPage { boxes }
, sidePanel { boxes }
......@@ -123,7 +122,15 @@ forestCpt = here.component "forest" cpt where
, showLogin
, showTree
, tasks } } _ = do
pure $ Forest.forestLayout { backend
showTree' <- T.useLive T.unequal showTree
pure $
if not showTree'
then mempty
else Forest.forestLayout
{ backend
, forestOpen
, frontends: defaultFrontends
, handed
......@@ -133,7 +140,6 @@ forestCpt = here.component "forest" cpt where
, route
, sessions
, showLogin
, showTree
, tasks } []
sidePanel :: R2.Leaf Props
......
module Gargantext.Components.TopBar where
import Data.Foldable (intercalate)
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
......@@ -27,7 +26,7 @@ topBarCpt = here.component "topBar" cpt
cpt { handed, showTree } children = do
handed' <- T.useLive T.unequal handed
pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark"
, id: "dafixedtop"
, role: "navigation"
}
......
#dafixedtop
// correction for the popover
z-index: 910
// height: 60px
//.logoSmall
// line-height: 15px
// height: 10px
......@@ -15,7 +10,10 @@
border: 3px solid white
#page-wrapper
margin-top : 96px
padding-top: 40px
padding-left: 16px
padding-right: 16px
width: 100%
#user-page-header
border-bottom : 1px solid black
......
......@@ -6,6 +6,14 @@
/* padding-bottom: 15px
/* float: none
#dafixedtop
position: sticky
top: 0
left: 0
right: 0
// correction for the popover
z-index: 910
#corporatop.nav-tabs > li
padding-left: 1
padding-right: 1
......
......@@ -101,3 +101,16 @@ ul
.join-button
padding-bottom: 100px
padding-top: 100px
#app
width: 100%
.router-inner
display: flex
&.left-handed
flex-direction: row
&.right-handed
flex-direction: row
......@@ -28,7 +28,7 @@ li
a.settings
visibility: visible
.forest
.forest-layout-content
& > .tree
margin-top: 20px
......@@ -153,6 +153,18 @@ li
opacity: var(--over50, 0)
#node-popup-tooltip
// @XXX "react-awesome-popover" lack of parent host parameter
//
// hence, the popover will be added from within the overflow context
// of component where its CTA lies, causing an issue with the hidden
// overflow of its parent component
//
// to avoid a truncated popover, this position workaround has to be set
// (so the popover will be hoisted to the overflow context of the window)
//
// @link https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/302
position: fixed
.tree
.node
margin-top: 5px
......@@ -160,6 +172,26 @@ li
.node
padding-left: 15px
// @XXX "react-awesome-popover" lack of parent host parameter
//
// as the container where the popover will be appended is actually a
// a heighthy sidebar (which a large is hidden with a scrollbar),
// the library tends to add the tooltip position in the middle of the
// sidebar height: which can be off screen
//
// this workaround appends the tooltip in a static position
.right-handed #node-popup-tooltip
$offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
top: 50%
left: $offset-x
transform: translateY(-50%)
.left-handed #node-popup-tooltip
$offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
top: 50%
right: $offset-x
transform: translateY(-50%)
.panel-actions
.almost-useable
color: orange
......@@ -172,16 +204,61 @@ li
// empirical value (see issue #308)
max-height: 50vh
overflow-y: scroll
.forest-layout-wrapper
// removing Bootstrap "col" padding
padding-left: 0
padding-right: 0
.forest-layout
background-color: #fff
position: fixed
top: 3.7em
width: 15%
$offset-y: 56px
padding-top: 8px
z-index: 909
.left-handed
.forest-layout
left: 80%
.right-handed
.forest-layout
left: 2%
// make the sidebar a scrollable component
// `max-width` rule is an addition due to Bootstrap "col-2" applied on its
// parent
position: fixed
height: calc(100vh - #{ $offset-y })
width: 100%
max-width: inherit
// avoiding ugly scrollbar
scrollbar-width: none
overflow-y: scroll
overflow-x: visible
&::-webkit-scrollbar
display: none
transition: border 150ms
// UX addition: visually delimiting the sidebar on hover
// -- for now in "_common.scss" file (see @TODO: More SASS structure)
// UX best pratice: when a lengthy column is overflowy hidden (with a scroll), a teaser
// UI element shows to the user that a scroll is possible
.forest-layout-teaser
$height: 24px // ~line-height to 1.5
$width: 16.6666666667% // simulate "col-2" sidebar attributes
$minus-parent-border: 1px // border size of the sidebar on hover
pointer-events: none
position: fixed
bottom: 0
height: $height
width: calc(#{ $width } - #{ $minus-parent-border})
// background -- for now in "_common.scss" file (@TODO: More SASS structure)
.right-handed .forest-layout-teaser
left: 0
.left-handed .forest-layout-teaser
right: 0
.left-handed .forest-layout
padding-left: 8px
padding-right: 16px
.right-handed .forest-layout
padding-left: 16px
padding-right: 8px
/// Abtstract
/// Add alpha channel to a color
/// @access public
/// @param {Color} $color - color to work with
/// @param {Number} $percentage - percentage of `$color` opacity
/// @return {Color}
@function mixAlpha($color, $percentage) {
@return rgba($color, $percentage);
}
/// Misc
.with-icon-font {
font-family: ForkAwesome, $font-family-base;
}
/// Tree
/// (?) @TODO: More SASS structure (eg. exporting variables into component
/// SASS files)
/// For now we have cut-copy the rules here
.right-handed .forest-layout {
border-right: 1px solid $body-bg;
&:hover { border-right: 1px solid $border-color; }
}
.left-handed .forest-layout {
border-left: 1px solid $body-bg;
&:hover { border-left: 1px solid $border-color; }
}
.forest-layout-teaser {
background: linear-gradient(to bottom, mixAlpha($body-bg, 0%) 0%, mixAlpha($body-bg, 100%) 45%);
}
......@@ -74,5 +74,7 @@ $breadcrumb-active-color:$gray-500;
@import "../../../node_modules/bootstrap/scss/bootstrap";
// Add SASS theme customizations here..
@import "./common";
.navbar-dark.bg-primary {background-color:#111111 !important;}
.table.able {color:#ccccc5}
......@@ -10,5 +10,5 @@ $theme-colors: ("primary": $blue, "secondary": $black)
// Bootstrap and its default variables
@import ../../../node_modules/bootstrap/scss/bootstrap
.with-icon-font
font-family: ForkAwesome, $font-family-base
// Add SASS theme customizations here..
@import ./_common
......@@ -24,3 +24,4 @@ $enable-rounded:false;
@import "../../../node_modules/bootstrap/scss/bootstrap";
// Add SASS theme customizations here..
@import "./common";
......@@ -16,3 +16,4 @@ $dark:#072247;
@import "../../../node_modules/bootstrap/scss/bootstrap";
// Add SASS theme customizations here..