Commit 325d0613 authored by Alexandre Delanoë's avatar Alexandre Delanoë

Merge remote-tracking branch 'origin/461-dev-popup-darkmode-rc0.x' into dev-merge

parents 565d20c5 7d913917
......@@ -10104,6 +10104,7 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
font-size: 11px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: #f1a50e;
......@@ -10112,19 +10113,41 @@ a:focus, a:hover {
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: #cccccc;
color: #212529;
display: none;
}
.node-popup-tooltip .popup-container {
display: flex;
flex-direction: column;
}
.node-popup-tooltip .popup-container__header .fa-pencil {
color: black;
}
.node-popup-tooltip .popup-container__body {
display: flex;
justify-content: center;
background-color: #000000;
padding: 40px 56px;
gap: 48px;
}
.node-popup-tooltip .popup-container__cta {
position: relative;
}
.node-popup-tooltip .popup-container__cta__button {
font-size: 18px;
}
.node-popup-tooltip .popup-container__cta__icon {
position: absolute;
top: -9px;
right: -13px;
font-size: 11px;
}
.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
color: #f1a50e;
}
.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
color: #8b2823;
}
.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
color: #212529;
display: none;
}
.frame-search.card {
......
......@@ -10057,6 +10057,7 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
font-size: 11px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: #f1a50e;
......@@ -10066,18 +10067,40 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: #212529;
display: none;
}
.node-popup-tooltip .popup-container {
display: flex;
flex-direction: column;
}
.node-popup-tooltip .popup-container__header .fa-pencil {
color: black;
}
.node-popup-tooltip .popup-container__body {
display: flex;
justify-content: center;
background-color: #fff;
padding: 40px 56px;
gap: 48px;
}
.node-popup-tooltip .popup-container__cta {
position: relative;
}
.node-popup-tooltip .popup-container__cta__button {
font-size: 18px;
}
.node-popup-tooltip .popup-container__cta__icon {
position: absolute;
top: -9px;
right: -13px;
font-size: 11px;
}
.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
color: #f1a50e;
}
.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
color: #8b2823;
}
.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
color: #212529;
display: none;
}
.frame-search.card {
......
......@@ -9813,6 +9813,7 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
font-size: 11px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: #f1a50e;
......@@ -9822,18 +9823,40 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: #212529;
display: none;
}
.node-popup-tooltip .popup-container {
display: flex;
flex-direction: column;
}
.node-popup-tooltip .popup-container__header .fa-pencil {
color: black;
}
.node-popup-tooltip .popup-container__body {
display: flex;
justify-content: center;
background-color: #fff;
padding: 40px 56px;
gap: 48px;
}
.node-popup-tooltip .popup-container__cta {
position: relative;
}
.node-popup-tooltip .popup-container__cta__button {
font-size: 18px;
}
.node-popup-tooltip .popup-container__cta__icon {
position: absolute;
top: -9px;
right: -13px;
font-size: 11px;
}
.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
color: #f1a50e;
}
.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
color: #8b2823;
}
.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
color: #212529;
display: none;
}
.frame-search.card {
......
......@@ -10061,6 +10061,7 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
font-size: 11px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: #f1a50e;
......@@ -10070,18 +10071,40 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: #212529;
display: none;
}
.node-popup-tooltip .popup-container {
display: flex;
flex-direction: column;
}
.node-popup-tooltip .popup-container__header .fa-pencil {
color: black;
}
.node-popup-tooltip .popup-container__body {
display: flex;
justify-content: center;
background-color: #fff;
padding: 40px 56px;
gap: 48px;
}
.node-popup-tooltip .popup-container__cta {
position: relative;
}
.node-popup-tooltip .popup-container__cta__button {
font-size: 18px;
}
.node-popup-tooltip .popup-container__cta__icon {
position: absolute;
top: -9px;
right: -13px;
font-size: 11px;
}
.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
color: #f1a50e;
}
.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
color: #8b2823;
}
.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
color: #212529;
display: none;
}
.frame-search.card {
......
......@@ -10062,6 +10062,7 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
font-size: 11px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: #f1a50e;
......@@ -10071,18 +10072,40 @@ a:focus, a:hover {
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: #212529;
display: none;
}
.node-popup-tooltip .popup-container {
display: flex;
flex-direction: column;
}
.node-popup-tooltip .popup-container__header .fa-pencil {
color: black;
}
.node-popup-tooltip .popup-container__body {
display: flex;
justify-content: center;
background-color: #fff;
padding: 40px 56px;
gap: 48px;
}
.node-popup-tooltip .popup-container__cta {
position: relative;
}
.node-popup-tooltip .popup-container__cta__button {
font-size: 18px;
}
.node-popup-tooltip .popup-container__cta__icon {
position: absolute;
top: -9px;
right: -13px;
font-size: 11px;
}
.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
color: #f1a50e;
}
.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
color: #8b2823;
}
.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
color: #212529;
display: none;
}
.frame-search.card {
......
......@@ -3,11 +3,12 @@ module Gargantext.Components.Forest.Tree.Node.Box where
import Gargantext.Prelude
import Data.Array as A
import Data.Foldable (intercalate)
import Data.Maybe (Maybe(..))
import Effect.Aff (Aff)
import Gargantext.Components.App.Store (Boxes)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..))
import Gargantext.Components.Forest.Tree.Node.Action.Add (addNodeView)
import Gargantext.Components.Forest.Tree.Node.Action.Contact as Contact
import Gargantext.Components.Forest.Tree.Node.Action.Delete (actionDelete)
......@@ -31,7 +32,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools (fragmentPT, textInputBox)
import Gargantext.Sessions (Session)
import Gargantext.Types (ID, Name, prettyNodeType)
import Gargantext.Types as GT
import Gargantext.Utils.Glyphicon (glyphiconActive)
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -119,7 +120,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
{ callback: const $ p.closeCallback unit
, title: "Close"
, name: "times"
, elevation: Level1
, elevation: Level2
}
]
]
......@@ -131,22 +132,42 @@ nodePopupCpt = here.component "nodePopupView" cpt where
{ name: "pencil"
, title: "Rename"
, callback: const $ T.write_ true isOpen
, elevation: Level1
, elevation: Level2
}
panelBody :: T.Box (Maybe NodeAction) -> Record NodePopupProps -> R.Element
panelBody nodePopupState { nodeType } =
let (SettingsBox { doc, buttons }) = settingsBox nodeType in
H.div {className: "popup-container__body card-body flex-space-between"}
$ [ B.wad_ [ "m-1" ]
, H.div { className: "flex-center" }
[ buttonClick { action: doc, state: nodePopupState, nodeType } ]
, H.div {className: "flex-center"}
$ map (\t -> buttonClick { action: t, state: nodePopupState, nodeType }) buttons ]
-- FIXME trick to increase the size of the box
<> if A.length buttons < 2
then [ H.div { className: "col-4" } [] ]
else []
let (SettingsBox { doc, buttons }) = settingsBox nodeType
in
H.div
{ className: intercalate " "
[ "popup-container__body"
, "card-body"
]
} $
[
buttonClick
{ action: doc
, state: nodePopupState
, nodeType
}
]
<>
(
buttons <#> \t ->
buttonClick
{ action: t
, state: nodePopupState
, nodeType
}
)
-- FIXME trick to increase the size of the box
<> if A.length buttons < 2
then [ H.div { className: "col-4" } [] ]
else []
mPanelAction :: Record NodePopupS -> Record NodePopupProps -> R.Element
mPanelAction { action: Just action }
{ boxes, dispatch, id, name, nodeType, session } =
......@@ -219,27 +240,75 @@ type ButtonClickProps =
, nodeType :: GT.NodeType
)
buttonClick :: Record ButtonClickProps -> R.Element
buttonClick p = R.createElement buttonClickCpt p []
buttonClick :: R2.Leaf ButtonClickProps
buttonClick = R2.leaf buttonClickCpt
buttonClickCpt :: R.Component ButtonClickProps
buttonClickCpt = here.component "buttonClick" cpt where
cpt {action: todo, state, nodeType} _ = do
action <- T.useLive T.unequal state
let className = glyphiconActive (glyphiconNodeAction todo) (action == (Just todo))
let style = iconAStyle nodeType todo
let click _ = T.write_ (if action == Just todo then Nothing else Just todo) state
pure $ H.div { className: "col-1" }
[ H.a { style, className, id: show todo, title: show todo, on: { click } } [] ]
-- | Open the help indications if selected already
iconAStyle n a =
{ color: hasColor (hasStatus n a)
, paddingTop: "6px", paddingBottom: "6px" }
cpt { action: todo
, state
, nodeType
} _ = do
-- | States
-- |
action <- R2.useLive' state
-- | Behaviors
-- |
let
click _ = T.write_ (Just todo) state
-- | Render
pure $
-- B.iconButton
-- { className: intercalate " "
-- [ "popup-container__body__button"
-- , modifierClassName (hasStatus nodeType todo)
-- ]
-- , name: glyphiconNodeAction todo
-- , title: show todo
-- , callback: click
-- , elevation: Level2
-- , status: action == Just todo ?
-- Disabled $
-- Enabled
-- }
H.div
{ className: intercalate " "
[ "popup-container__cta"
, modifierClassName (hasStatus nodeType todo)
]
}
[
B.iconButton
{ className: "popup-container__cta__button"
, name: glyphiconNodeAction todo
, title: show todo
, callback: click
, elevation: Level2
, status: action == Just todo ?
Disabled $
Enabled
}
,
B.icon
{ className: "popup-container__cta__icon"
, name: "circle"
}
]
-- | Helpers
-- |
hasColor :: Status -> String
hasColor Stable = "black"
hasColor Test = "orange"
hasColor Dev = "red"
modifierClassName :: Status -> String
modifierClassName = case _ of
Stable -> blk <> "--ok-to-use"
Test -> blk <> "--almost-useable"
Dev -> blk <> "--development-in-progress"
where
blk = "popup-container__cta"
type NodeProps =
( id :: ID
......
......@@ -453,28 +453,54 @@ $node-popup-width: 544px
.b-icon
margin-right: space-x(1)
font-size: 11px
&__almost-useable
color: darken($pastel-orange, 25%)
color: $almost-useable
&__development-in-progress
color: darken($pastel-red, 25%)
color: $development-in-progress
&__ok-to-use
color: $body-color
color: $ok-to-use
// (?) avoid unnecessary informations
display: none
.popup-container
display: flex
flex-direction: column
&__header
.fa-pencil
color: black
&__body
display: flex
justify-content: center
background-color: $body-bg
padding: space-x(5) space-x(7)
gap: space-x(6)
&__cta
position: relative
&__button
font-size: 18px
&__icon
$offset-y: -9px
$offset-x: -13px
position: absolute
top: $offset-y
right: $offset-x
font-size: 11px
// @XXX SASS lacking of immediate parent selector
&--almost-useable .popup-container__cta__icon
color: $almost-useable
&--development-in-progress .popup-container__cta__icon
color: $development-in-progress
&--ok-to-use .popup-container__cta__icon
color: $ok-to-use
// (?) avoid unnecessary informations
display: none
/////////////////////////////////////////
......
@import './modules/_form'
@import './modules/_layout'
@import './modules/_annotation'
@import './modules/_tree'
/// Colours
$almost-useable: darken($pastel-orange, 25%);
$development-in-progress: darken($pastel-red, 25%);
$ok-to-use: $body-color;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment