Commit 06f673a1 authored by Fabien Manière's avatar Fabien Manière

update the topbar and the graph topbar design

parent 1ce56e02
......@@ -6303,9 +6303,11 @@ h3 {
color: inherit;
}
.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
.main-topbar__tree-switcher.btn-light .fa::before,
.main-topbar__tree-switcher.btn-outline-light .fa::before {
.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
.main-topbar__tree-switcher.btn-light .fa:before,
.main-topbar__tree-switcher.btn-outline-light .fa:before,
#portal-topbar .graph-topbar .btn-light:hover .fa:before,
#portal-topbar .graph-topbar .btn-outline-light .fa:before {
color: inherit !important;
}
......@@ -6314,7 +6316,8 @@ h3 {
.popup-container .search-bar .btn.fa,
.login-modal-form .btn .fa,
.corpus-layout__code-section .b-button .fa,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
#portal-topbar .graph-topbar__title .fa {
color: #D1CDC7 !important;
}
.main-topbar .nav-item > a .fa:before,
......@@ -6322,7 +6325,8 @@ h3 {
.popup-container .search-bar .btn.fa:before,
.login-modal-form .btn .fa:before,
.corpus-layout__code-section .b-button .fa:before,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
#portal-topbar .graph-topbar__title .fa:before {
color: #D1CDC7 !important;
}
......@@ -6521,6 +6525,13 @@ h3 {
border: 1px solid #6C757D;
}
.rounded-circle-2 {
border-radius: 50px;
}
.rounded-circle-2 .form-control {
border-radius: 50px;
}
.echarts-for-react {
height: 300px;
}
......@@ -9566,10 +9577,20 @@ input[type=range]:-moz-focusring {
position: sticky;
top: 0;
z-index: 2;
height: 40px;
}
.main-topbar__theme-switcher select {
margin: 4px 0;
padding-top: 0;
padding-bottom: 0;
height: 2rem;
}
.main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
margin-right: 8px;
}
.main-topbar__tree-switcher {
padding: 0.15rem 0.5rem;
}
.main-topbar.navbar-dark .navbar-text:hover {
color: rgba(255, 255, 255, 0.75);
}
......@@ -9580,6 +9601,9 @@ input[type=range]:-moz-focusring {
.main-topbar__logo {
margin-right: initial;
}
.main-topbar__logo img {
max-width: none;
}
.right-handed .main-topbar {
flex-direction: row;
}
......@@ -9734,7 +9758,6 @@ input[type=range]:-moz-focusring {
position: absolute;
z-index: 1;
background-color: #181A1B;
width: 100%;
border-bottom: 1px solid #dee2e6;
}
.graph-layout__toolbar .b-fieldset {
......@@ -9757,8 +9780,6 @@ input[type=range]:-moz-focusring {
padding: 0 8px;
height: 100%;
display: flex;
padding-left: 4px;
padding-right: 4px;
}
.right-handed .graph-topbar {
border-left: 1px solid rgba(255, 255, 255, 0.05);
......@@ -9769,18 +9790,28 @@ input[type=range]:-moz-focusring {
}
.graph-topbar__toolbar, .graph-topbar__sidebar {
width: 136px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-left: 4px;
padding-right: 4px;
}
.graph-topbar__search {
width: 304px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.graph-topbar__search [type=submit] {
display: none;
}
.graph-topbar__search .form-control {
height: 2rem;
padding-top: 0;
padding-bottom: 0;
}
.graph-doc-focus {
scrollbar-width: none;
......@@ -10033,6 +10064,7 @@ input[type=range]:-moz-focusring {
.graph-toolbar {
display: flex;
padding: 8px;
padding-top: 16px;
}
.graph-toolbar__gap {
width: 8px;
......
......@@ -6114,9 +6114,11 @@ h3 {
color: inherit;
}
.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
.main-topbar__tree-switcher.btn-light .fa::before,
.main-topbar__tree-switcher.btn-outline-light .fa::before {
.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
.main-topbar__tree-switcher.btn-light .fa:before,
.main-topbar__tree-switcher.btn-outline-light .fa:before,
#portal-topbar .graph-topbar .btn-light:hover .fa:before,
#portal-topbar .graph-topbar .btn-outline-light .fa:before {
color: inherit !important;
}
......@@ -6125,7 +6127,8 @@ h3 {
.popup-container .search-bar .btn.fa,
.login-modal-form .btn .fa,
.corpus-layout__code-section .b-button .fa,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
#portal-topbar .graph-topbar__title .fa {
color: #f8f9fa !important;
}
.main-topbar .nav-item > a .fa:before,
......@@ -6133,7 +6136,8 @@ h3 {
.popup-container .search-bar .btn.fa:before,
.login-modal-form .btn .fa:before,
.corpus-layout__code-section .b-button .fa:before,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
#portal-topbar .graph-topbar__title .fa:before {
color: #f8f9fa !important;
}
......@@ -6332,6 +6336,13 @@ h3 {
border: 1px solid #CED4DA;
}
.rounded-circle-2 {
border-radius: 50px;
}
.rounded-circle-2 .form-control {
border-radius: 50px;
}
.echarts-for-react {
height: 300px;
}
......@@ -9373,10 +9384,20 @@ input[type=range]:-moz-focusring {
position: sticky;
top: 0;
z-index: 2;
height: 40px;
}
.main-topbar__theme-switcher select {
margin: 4px 0;
padding-top: 0;
padding-bottom: 0;
height: 2rem;
}
.main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
margin-right: 8px;
}
.main-topbar__tree-switcher {
padding: 0.15rem 0.5rem;
}
.main-topbar.navbar-dark .navbar-text:hover {
color: rgba(255, 255, 255, 0.75);
}
......@@ -9387,6 +9408,9 @@ input[type=range]:-moz-focusring {
.main-topbar__logo {
margin-right: initial;
}
.main-topbar__logo img {
max-width: none;
}
.right-handed .main-topbar {
flex-direction: row;
}
......@@ -9541,7 +9565,6 @@ input[type=range]:-moz-focusring {
position: absolute;
z-index: 1;
background-color: #fff;
width: 100%;
border-bottom: 1px solid #dee2e6;
}
.graph-layout__toolbar .b-fieldset {
......@@ -9564,8 +9587,6 @@ input[type=range]:-moz-focusring {
padding: 0 8px;
height: 100%;
display: flex;
padding-left: 4px;
padding-right: 4px;
}
.right-handed .graph-topbar {
border-left: 1px solid rgba(255, 255, 255, 0.05);
......@@ -9576,18 +9597,28 @@ input[type=range]:-moz-focusring {
}
.graph-topbar__toolbar, .graph-topbar__sidebar {
width: 136px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-left: 4px;
padding-right: 4px;
}
.graph-topbar__search {
width: 304px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.graph-topbar__search [type=submit] {
display: none;
}
.graph-topbar__search .form-control {
height: 2rem;
padding-top: 0;
padding-bottom: 0;
}
.graph-doc-focus {
scrollbar-width: none;
......@@ -9840,6 +9871,7 @@ input[type=range]:-moz-focusring {
.graph-toolbar {
display: flex;
padding: 8px;
padding-top: 16px;
}
.graph-toolbar__gap {
width: 8px;
......
......@@ -5869,9 +5869,11 @@ h3 {
color: inherit;
}
.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
.main-topbar__tree-switcher.btn-light .fa::before,
.main-topbar__tree-switcher.btn-outline-light .fa::before {
.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
.main-topbar__tree-switcher.btn-light .fa:before,
.main-topbar__tree-switcher.btn-outline-light .fa:before,
#portal-topbar .graph-topbar .btn-light:hover .fa:before,
#portal-topbar .graph-topbar .btn-outline-light .fa:before {
color: inherit !important;
}
......@@ -5880,7 +5882,8 @@ h3 {
.popup-container .search-bar .btn.fa,
.login-modal-form .btn .fa,
.corpus-layout__code-section .b-button .fa,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
#portal-topbar .graph-topbar__title .fa {
color: #eceeec !important;
}
.main-topbar .nav-item > a .fa:before,
......@@ -5888,7 +5891,8 @@ h3 {
.popup-container .search-bar .btn.fa:before,
.login-modal-form .btn .fa:before,
.corpus-layout__code-section .b-button .fa:before,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
#portal-topbar .graph-topbar__title .fa:before {
color: #eceeec !important;
}
......@@ -6087,6 +6091,13 @@ h3 {
border: 1px solid #CED4DA;
}
.rounded-circle-2 {
border-radius: 50px;
}
.rounded-circle-2 .form-control {
border-radius: 50px;
}
.echarts-for-react {
height: 300px;
}
......@@ -9132,10 +9143,20 @@ input[type=range]:-moz-focusring {
position: sticky;
top: 0;
z-index: 2;
height: 40px;
}
.main-topbar__theme-switcher select {
margin: 4px 0;
padding-top: 0;
padding-bottom: 0;
height: 2rem;
}
.main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
margin-right: 8px;
}
.main-topbar__tree-switcher {
padding: 0.15rem 0.5rem;
}
.main-topbar.navbar-dark .navbar-text:hover {
color: rgba(255, 255, 255, 0.75);
}
......@@ -9146,6 +9167,9 @@ input[type=range]:-moz-focusring {
.main-topbar__logo {
margin-right: initial;
}
.main-topbar__logo img {
max-width: none;
}
.right-handed .main-topbar {
flex-direction: row;
}
......@@ -9300,7 +9324,6 @@ input[type=range]:-moz-focusring {
position: absolute;
z-index: 1;
background-color: #fff;
width: 100%;
border-bottom: 1px solid #dee2e6;
}
.graph-layout__toolbar .b-fieldset {
......@@ -9323,8 +9346,6 @@ input[type=range]:-moz-focusring {
padding: 0 8px;
height: 100%;
display: flex;
padding-left: 4px;
padding-right: 4px;
}
.right-handed .graph-topbar {
border-left: 1px solid rgba(255, 255, 255, 0.05);
......@@ -9335,18 +9356,28 @@ input[type=range]:-moz-focusring {
}
.graph-topbar__toolbar, .graph-topbar__sidebar {
width: 136px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-left: 4px;
padding-right: 4px;
}
.graph-topbar__search {
width: 304px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.graph-topbar__search [type=submit] {
display: none;
}
.graph-topbar__search .form-control {
height: 2rem;
padding-top: 0;
padding-bottom: 0;
}
.graph-doc-focus {
scrollbar-width: none;
......@@ -9599,6 +9630,7 @@ input[type=range]:-moz-focusring {
.graph-toolbar {
display: flex;
padding: 8px;
padding-top: 16px;
}
.graph-toolbar__gap {
width: 8px;
......
......@@ -6117,9 +6117,11 @@ h3 {
color: inherit;
}
.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
.main-topbar__tree-switcher.btn-light .fa::before,
.main-topbar__tree-switcher.btn-outline-light .fa::before {
.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
.main-topbar__tree-switcher.btn-light .fa:before,
.main-topbar__tree-switcher.btn-outline-light .fa:before,
#portal-topbar .graph-topbar .btn-light:hover .fa:before,
#portal-topbar .graph-topbar .btn-outline-light .fa:before {
color: inherit !important;
}
......@@ -6128,7 +6130,8 @@ h3 {
.popup-container .search-bar .btn.fa,
.login-modal-form .btn .fa,
.corpus-layout__code-section .b-button .fa,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
#portal-topbar .graph-topbar__title .fa {
color: #F2F2F0 !important;
}
.main-topbar .nav-item > a .fa:before,
......@@ -6136,7 +6139,8 @@ h3 {
.popup-container .search-bar .btn.fa:before,
.login-modal-form .btn .fa:before,
.corpus-layout__code-section .b-button .fa:before,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
#portal-topbar .graph-topbar__title .fa:before {
color: #F2F2F0 !important;
}
......@@ -6335,6 +6339,13 @@ h3 {
border: 1px solid #CED4DA;
}
.rounded-circle-2 {
border-radius: 50px;
}
.rounded-circle-2 .form-control {
border-radius: 50px;
}
.echarts-for-react {
height: 300px;
}
......@@ -9380,10 +9391,20 @@ input[type=range]:-moz-focusring {
position: sticky;
top: 0;
z-index: 2;
height: 40px;
}
.main-topbar__theme-switcher select {
margin: 4px 0;
padding-top: 0;
padding-bottom: 0;
height: 2rem;
}
.main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
margin-right: 8px;
}
.main-topbar__tree-switcher {
padding: 0.15rem 0.5rem;
}
.main-topbar.navbar-dark .navbar-text:hover {
color: rgba(255, 255, 255, 0.75);
}
......@@ -9394,6 +9415,9 @@ input[type=range]:-moz-focusring {
.main-topbar__logo {
margin-right: initial;
}
.main-topbar__logo img {
max-width: none;
}
.right-handed .main-topbar {
flex-direction: row;
}
......@@ -9548,7 +9572,6 @@ input[type=range]:-moz-focusring {
position: absolute;
z-index: 1;
background-color: #fff;
width: 100%;
border-bottom: 1px solid #dee2e6;
}
.graph-layout__toolbar .b-fieldset {
......@@ -9571,8 +9594,6 @@ input[type=range]:-moz-focusring {
padding: 0 8px;
height: 100%;
display: flex;
padding-left: 4px;
padding-right: 4px;
}
.right-handed .graph-topbar {
border-left: 1px solid rgba(255, 255, 255, 0.05);
......@@ -9583,18 +9604,28 @@ input[type=range]:-moz-focusring {
}
.graph-topbar__toolbar, .graph-topbar__sidebar {
width: 136px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-left: 4px;
padding-right: 4px;
}
.graph-topbar__search {
width: 304px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.graph-topbar__search [type=submit] {
display: none;
}
.graph-topbar__search .form-control {
height: 2rem;
padding-top: 0;
padding-bottom: 0;
}
.graph-doc-focus {
scrollbar-width: none;
......@@ -9847,6 +9878,7 @@ input[type=range]:-moz-focusring {
.graph-toolbar {
display: flex;
padding: 8px;
padding-top: 16px;
}
.graph-toolbar__gap {
width: 8px;
......
......@@ -6118,9 +6118,11 @@ h3 {
color: inherit;
}
.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
.main-topbar__tree-switcher.btn-light .fa::before,
.main-topbar__tree-switcher.btn-outline-light .fa::before {
.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
.main-topbar__tree-switcher.btn-light .fa:before,
.main-topbar__tree-switcher.btn-outline-light .fa:before,
#portal-topbar .graph-topbar .btn-light:hover .fa:before,
#portal-topbar .graph-topbar .btn-outline-light .fa:before {
color: inherit !important;
}
......@@ -6129,7 +6131,8 @@ h3 {
.popup-container .search-bar .btn.fa,
.login-modal-form .btn .fa,
.corpus-layout__code-section .b-button .fa,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
#portal-topbar .graph-topbar__title .fa {
color: #eceeec !important;
}
.main-topbar .nav-item > a .fa:before,
......@@ -6137,7 +6140,8 @@ h3 {
.popup-container .search-bar .btn.fa:before,
.login-modal-form .btn .fa:before,
.corpus-layout__code-section .b-button .fa:before,
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
#portal-topbar .graph-topbar__title .fa:before {
color: #eceeec !important;
}
......@@ -6336,6 +6340,13 @@ h3 {
border: 1px solid #CED4DA;
}
.rounded-circle-2 {
border-radius: 50px;
}
.rounded-circle-2 .form-control {
border-radius: 50px;
}
.echarts-for-react {
height: 300px;
}
......@@ -9381,10 +9392,20 @@ input[type=range]:-moz-focusring {
position: sticky;
top: 0;
z-index: 2;
height: 40px;
}
.main-topbar__theme-switcher select {
margin: 4px 0;
padding-top: 0;
padding-bottom: 0;
height: 2rem;
}
.main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
margin-right: 8px;
}
.main-topbar__tree-switcher {
padding: 0.15rem 0.5rem;
}
.main-topbar.navbar-dark .navbar-text:hover {
color: rgba(255, 255, 255, 0.75);
}
......@@ -9395,6 +9416,9 @@ input[type=range]:-moz-focusring {
.main-topbar__logo {
margin-right: initial;
}
.main-topbar__logo img {
max-width: none;
}
.right-handed .main-topbar {
flex-direction: row;
}
......@@ -9549,7 +9573,6 @@ input[type=range]:-moz-focusring {
position: absolute;
z-index: 1;
background-color: #fff;
width: 100%;
border-bottom: 1px solid #dee2e6;
}
.graph-layout__toolbar .b-fieldset {
......@@ -9572,8 +9595,6 @@ input[type=range]:-moz-focusring {
padding: 0 8px;
height: 100%;
display: flex;
padding-left: 4px;
padding-right: 4px;
}
.right-handed .graph-topbar {
border-left: 1px solid rgba(255, 255, 255, 0.05);
......@@ -9584,18 +9605,28 @@ input[type=range]:-moz-focusring {
}
.graph-topbar__toolbar, .graph-topbar__sidebar {
width: 136px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-left: 4px;
padding-right: 4px;
}
.graph-topbar__search {
width: 304px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.graph-topbar__search [type=submit] {
display: none;
}
.graph-topbar__search .form-control {
height: 2rem;
padding-top: 0;
padding-bottom: 0;
}
.graph-doc-focus {
scrollbar-width: none;
......@@ -9848,6 +9879,7 @@ input[type=range]:-moz-focusring {
.graph-toolbar {
display: flex;
padding: 8px;
padding-top: 16px;
}
.graph-toolbar__gap {
width: 8px;
......
......@@ -64,9 +64,9 @@ nodeSearchControlCpt = here.component "nodeSearchControl" cpt
{ autocompleteSearch: autocompleteSearch graph
, onAutocompleteClick: doSearch
, onEnterPress: doSearch
, classes: "filter-results-completions"
, classes: "filter-results-completions rounded-circle-2 text-small py-0"
, state: search
, placeholder: "filter and select terms here..."
, placeholder: "find and select a term here..."
}
,
B.button
......
......@@ -7,7 +7,7 @@ import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
import Gargantext.Components.GraphExplorer.Store as GraphStore
import Gargantext.Components.GraphExplorer.Topbar.Search (nodeSearchControl)
import Gargantext.Types as GT
import Gargantext.Utils ((?))
import Gargantext.Utils (nbsp, (?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -38,33 +38,60 @@ component = here.component "topBar" cpt where
pure $
H.div
{ className: "graph-topbar" }
{ className: "graph-topbar bg-primary h-100" }
[
H.div
{ className: "graph-topbar__title align-self-center px-1 text-light" }
[
B.icon { name: "hubzilla" }
,
H.text $ nbsp 1
,
H.text "Graph"
]
,
-- Toolbar toggle
B.button
{ className: "graph-topbar__toolbar"
{ className: "graph-topbar__toolbar rounded-circle-2 py-0 px-2 mr-1"
, callback: \_ -> T.modify_ (not) showControls
, variant: showControls' ?
ButtonVariant Light $
OutlinedButtonVariant Light
, title: showControls' ?
"Hide toolbar" $
"Show toolbar"
}
[
H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
B.icon { name: "sliders" }
,
H.text $ nbsp 1
,
H.text "Toolbar"
-- ,
-- H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
]
,
-- Sidebar toggle
B.button
{ className: "graph-topbar__sidebar"
{ className: "graph-topbar__sidebar rounded-circle-2 py-0 px-2 mr-1"
, callback: \_ -> T.modify_ GT.toggleSidePanelState showSidebar
, variant: showSidebar' == GT.Opened ?
ButtonVariant Light $
OutlinedButtonVariant Light
}
[
H.text $ showSidebar' == GT.Opened ?
, title: showSidebar' == GT.Opened ?
"Hide sidebar" $
"Show sidebar"
}
[
B.icon { name: "columns" }
,
H.text $ nbsp 1
,
H.text "Sidebar"
-- ,
-- H.text $ showSidebar' == GT.Opened ?
-- "Hide sidebar" $
-- "Show sidebar"
]
,