...
 
Commits (7)
......@@ -8747,31 +8747,6 @@ a:focus, a:hover {
top: 50%;
}
.table tr td {
color: #005a9aff;
}
.table tr td .active {
font-weight: bold;
text-decoration: underline;
}
.table tr td .ngrams-selector {
display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
padding: 3px;
}
.table tr td .trash {
text-decoration: line-through;
}
.action-search {
margin: 10px;
}
.search-bar {
margin: 10px;
}
/* */
.join-button {
padding-bottom: 100px;
......@@ -8960,6 +8935,116 @@ select.form-control {
opacity: var(--over50, 0);
}
.table tr td {
height: 48px;
}
.table .page-paint-raw--selected {
position: relative;
}
.table .page-paint-raw--selected td:first-child::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
width: 3px;
background-color: #0F81C7;
position: absolute;
}
.table .page-paint-row--trash {
text-decoration: line-through;
}
.table .doc-chooser {
padding-top: 3px;
text-align: center;
}
.table .rating-group {
display: flex;
padding-top: 3px;
}
.table .rating-group__action {
width: 14px;
margin-right: 8px;
}
.search-button-prepend .input-group-text {
width: 41px;
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: flex-start;
}
.ngrams-table-container__header__item {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-table-container__header__item:not(:last-child) {
margin-right: 8px;
}
.ngrams-table-container__add-term {
margin-top: -8px;
margin-bottom: 12px;
}
.ngrams-table-container__footer {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__footer__item {
text-align: center;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #FF550B;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
margin-top: 16px;
}
.ngrams-tree-edit-real__actions .b-button {
margin-right: 8px;
}
.loaded-ngrams-table-header {
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.loaded-ngrams-table-header__icon {
font-size: 16px;
}
.loaded-ngrams-table-header__text {
font-size: 22px;
font-weight: bold;
font-family: "Comfortaa";
}
.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
color: #6C757D;
font-size: 11px;
margin-right: 4px;
}
.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
content: "└";
}
.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
content: "┘";
}
.ngrams-tree-loaded-node--first-child {
margin-left: -2px;
}
.ngrams-tree-loaded-node--grand-child {
margin-left: 13px;
}
.annotation-run {
cursor: pointer;
}
......
......@@ -8700,31 +8700,6 @@ a:focus, a:hover {
top: 50%;
}
.table tr td {
color: #005a9aff;
}
.table tr td .active {
font-weight: bold;
text-decoration: underline;
}
.table tr td .ngrams-selector {
display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
padding: 3px;
}
.table tr td .trash {
text-decoration: line-through;
}
.action-search {
margin: 10px;
}
.search-bar {
margin: 10px;
}
/* */
.join-button {
padding-bottom: 100px;
......@@ -8913,6 +8888,115 @@ select.form-control {
opacity: var(--over50, 0);
}
.table tr td {
height: 48px;
}
.table .page-paint-raw--selected {
position: relative;
}
.table .page-paint-raw--selected td:first-child::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
width: 3px;
background-color: #17a2b8;
position: absolute;
}
.table .page-paint-row--trash {
text-decoration: line-through;
}
.table .doc-chooser {
padding-top: 3px;
text-align: center;
}
.table .rating-group {
display: flex;
padding-top: 3px;
}
.table .rating-group__action {
width: 14px;
margin-right: 8px;
}
.search-button-prepend .input-group-text {
width: 41px;
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: flex-start;
}
.ngrams-table-container__header__item {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-table-container__header__item:not(:last-child) {
margin-right: 8px;
}
.ngrams-table-container__add-term {
margin-top: -8px;
margin-bottom: 12px;
}
.ngrams-table-container__footer {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__footer__item {
text-align: center;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #005a9a;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
margin-top: 16px;
}
.ngrams-tree-edit-real__actions .b-button {
margin-right: 8px;
}
.loaded-ngrams-table-header {
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.loaded-ngrams-table-header__icon {
font-size: 16px;
}
.loaded-ngrams-table-header__text {
font-size: 22px;
font-weight: bold;
}
.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
color: #CED4DA;
font-size: 11px;
margin-right: 4px;
}
.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
content: "└";
}
.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
content: "┘";
}
.ngrams-tree-loaded-node--first-child {
margin-left: -2px;
}
.ngrams-tree-loaded-node--grand-child {
margin-left: 13px;
}
.annotation-run {
cursor: pointer;
}
......
......@@ -8456,31 +8456,6 @@ a:focus, a:hover {
top: 50%;
}
.table tr td {
color: #005a9aff;
}
.table tr td .active {
font-weight: bold;
text-decoration: underline;
}
.table tr td .ngrams-selector {
display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
padding: 3px;
}
.table tr td .trash {
text-decoration: line-through;
}
.action-search {
margin: 10px;
}
.search-bar {
margin: 10px;
}
/* */
.join-button {
padding-bottom: 100px;
......@@ -8669,6 +8644,116 @@ select.form-control {
opacity: var(--over50, 0);
}
.table tr td {
height: 48px;
}
.table .page-paint-raw--selected {
position: relative;
}
.table .page-paint-raw--selected td:first-child::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
width: 3px;
background-color: #5c8f94;
position: absolute;
}
.table .page-paint-row--trash {
text-decoration: line-through;
}
.table .doc-chooser {
padding-top: 3px;
text-align: center;
}
.table .rating-group {
display: flex;
padding-top: 3px;
}
.table .rating-group__action {
width: 14px;
margin-right: 8px;
}
.search-button-prepend .input-group-text {
width: 41px;
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: flex-start;
}
.ngrams-table-container__header__item {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-table-container__header__item:not(:last-child) {
margin-right: 8px;
}
.ngrams-table-container__add-term {
margin-top: -8px;
margin-bottom: 12px;
}
.ngrams-table-container__footer {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__footer__item {
text-align: center;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #2f3c48;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
margin-top: 16px;
}
.ngrams-tree-edit-real__actions .b-button {
margin-right: 8px;
}
.loaded-ngrams-table-header {
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.loaded-ngrams-table-header__icon {
font-size: 16px;
}
.loaded-ngrams-table-header__text {
font-size: 22px;
font-weight: bold;
font-family: "Oswald";
}
.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
color: #CED4DA;
font-size: 11px;
margin-right: 4px;
}
.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
content: "└";
}
.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
content: "┘";
}
.ngrams-tree-loaded-node--first-child {
margin-left: -2px;
}
.ngrams-tree-loaded-node--grand-child {
margin-left: 13px;
}
.annotation-run {
cursor: pointer;
}
......
......@@ -8704,31 +8704,6 @@ a:focus, a:hover {
top: 50%;
}
.table tr td {
color: #005a9aff;
}
.table tr td .active {
font-weight: bold;
text-decoration: underline;
}
.table tr td .ngrams-selector {
display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
padding: 3px;
}
.table tr td .trash {
text-decoration: line-through;
}
.action-search {
margin: 10px;
}
.search-bar {
margin: 10px;
}
/* */
.join-button {
padding-bottom: 100px;
......@@ -8917,6 +8892,116 @@ select.form-control {
opacity: var(--over50, 0);
}
.table tr td {
height: 48px;
}
.table .page-paint-raw--selected {
position: relative;
}
.table .page-paint-raw--selected td:first-child::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
width: 3px;
background-color: #74DBEF;
position: absolute;
}
.table .page-paint-row--trash {
text-decoration: line-through;
}
.table .doc-chooser {
padding-top: 3px;
text-align: center;
}
.table .rating-group {
display: flex;
padding-top: 3px;
}
.table .rating-group__action {
width: 14px;
margin-right: 8px;
}
.search-button-prepend .input-group-text {
width: 41px;
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: flex-start;
}
.ngrams-table-container__header__item {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-table-container__header__item:not(:last-child) {
margin-right: 8px;
}
.ngrams-table-container__add-term {
margin-top: -8px;
margin-bottom: 12px;
}
.ngrams-table-container__footer {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__footer__item {
text-align: center;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #083358;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
margin-top: 16px;
}
.ngrams-tree-edit-real__actions .b-button {
margin-right: 8px;
}
.loaded-ngrams-table-header {
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.loaded-ngrams-table-header__icon {
font-size: 16px;
}
.loaded-ngrams-table-header__text {
font-size: 22px;
font-weight: bold;
font-family: "Crete Round";
}
.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
color: #CED4DA;
font-size: 11px;
margin-right: 4px;
}
.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
content: "└";
}
.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
content: "┘";
}
.ngrams-tree-loaded-node--first-child {
margin-left: -2px;
}
.ngrams-tree-loaded-node--grand-child {
margin-left: 13px;
}
.annotation-run {
cursor: pointer;
}
......
......@@ -8705,31 +8705,6 @@ a:focus, a:hover {
top: 50%;
}
.table tr td {
color: #005a9aff;
}
.table tr td .active {
font-weight: bold;
text-decoration: underline;
}
.table tr td .ngrams-selector {
display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
padding: 3px;
}
.table tr td .trash {
text-decoration: line-through;
}
.action-search {
margin: 10px;
}
.search-bar {
margin: 10px;
}
/* */
.join-button {
padding-bottom: 100px;
......@@ -8918,6 +8893,116 @@ select.form-control {
opacity: var(--over50, 0);
}
.table tr td {
height: 48px;
}
.table .page-paint-raw--selected {
position: relative;
}
.table .page-paint-raw--selected td:first-child::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
width: 3px;
background-color: #515151;
position: absolute;
}
.table .page-paint-row--trash {
text-decoration: line-through;
}
.table .doc-chooser {
padding-top: 3px;
text-align: center;
}
.table .rating-group {
display: flex;
padding-top: 3px;
}
.table .rating-group__action {
width: 14px;
margin-right: 8px;
}
.search-button-prepend .input-group-text {
width: 41px;
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: flex-start;
}
.ngrams-table-container__header__item {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-table-container__header__item:not(:last-child) {
margin-right: 8px;
}
.ngrams-table-container__add-term {
margin-top: -8px;
margin-bottom: 12px;
}
.ngrams-table-container__footer {
padding: 0.75rem 1.25rem;
}
.ngrams-table-container__footer__item {
text-align: center;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #222222;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
margin-top: 16px;
}
.ngrams-tree-edit-real__actions .b-button {
margin-right: 8px;
}
.loaded-ngrams-table-header {
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.loaded-ngrams-table-header__icon {
font-size: 16px;
}
.loaded-ngrams-table-header__text {
font-size: 22px;
font-weight: bold;
font-family: "Open Sans";
}
.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
color: #CED4DA;
font-size: 11px;
margin-right: 4px;
}
.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
content: "└";
}
.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
content: "┘";
}
.ngrams-tree-loaded-node--first-child {
margin-left: -2px;
}
.ngrams-tree-loaded-node--grand-child {
margin-left: 13px;
}
.annotation-run {
cursor: pointer;
}
......
......@@ -9,12 +9,15 @@ import Data.Map as Map
import Data.Maybe (Maybe(..))
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Variant(..))
import Gargantext.Components.Category.Types (Category(..), Star(..), cat2score, categories, clickAgain, star2score, stars)
import Gargantext.Components.DocsTable.Types (DocumentsView(..), LocalCategories, LocalUserScore)
import Gargantext.Config.REST (AffRESTError)
import Gargantext.Routes (SessionRoute(NodeAPI))
import Gargantext.Sessions (Session, put)
import Gargantext.Types (NodeID, NodeType(..))
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import Gargantext.Utils.Toestand as T2
import Reactix as R
......@@ -42,23 +45,53 @@ ratingCpt = here.component "rating" cpt where
, row: DocumentsView r
, score
, session
, setLocalCategories } _ =
pure $ H.div { className:"flex" } divs where
divs = map (\s -> H.div { className : icon' score s
, on: { click: onClick s } } []) stars
icon' Star_0 Star_0 = "fa fa-times-circle"
icon' _ Star_0 = "fa fa-times"
icon' c s = if star2score c < star2score s then "fa fa-star-o" else "fa fa-star"
, setLocalCategories
} _ = do
-- | Computed
-- |
let
icon' Star_0 Star_0 = "times-circle"
icon' _ Star_0 = "times"
icon' c s = star2score c < star2score s ? "star-o" $ "star"
variant' Star_0 Star_0 = Dark
variant' _ Star_0 = Dark
variant' _ _ = Dark
className' Star_0 Star_0 = "rating-group__action"
className' _ Star_0 = "rating-group__action"
className' _ _ = "rating-group__star"
-- | Behaviors
-- |
let
onClick c _ = do
let c' = if score == c
then clickAgain c
else c
let c' = score == c ? clickAgain c $ c
setLocalCategories $ Map.insert r._id c'
launchAff_ $ do
_ <- putRating session nodeId $ RatingQuery { nodeIds: [r._id], rating: c' }
launchAff_ do
_ <- putRating session nodeId $ RatingQuery
{ nodeIds: [r._id]
, rating: c'
}
liftEffect $ T2.reload chartReload
-- | Render
-- |
pure $
H.div
{ className: "rating-group" } $
stars <#> \s ->
B.iconButton
{ name: icon' score s
, callback: onClick s
, overlay: false
, variant: variant' score s
, className: className' score s
}
newtype RatingQuery =
RatingQuery { nodeIds :: Array Int
, rating :: Star
......
......@@ -6,7 +6,6 @@ import Gargantext.Prelude
import DOM.Simple.Event as DE
import Data.Array (any)
import Data.Array as A
import Data.Either (Either)
import Data.Generic.Rep (class Generic)
import Data.Lens ((^.))
import Data.Lens.At (at)
......@@ -27,7 +26,7 @@ import Effect.Class (liftEffect)
import Effect.Timer (setTimeout)
import Gargantext.Components.App.Store (Boxes)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
import Gargantext.Components.Category (rating)
import Gargantext.Components.Category.Types (Star(..))
import Gargantext.Components.DocsTable.DocumentFormCreation as DFC
......@@ -540,6 +539,9 @@ pagePaintRawCpt = here.component "pagePaintRaw" cpt where
reload <- T.useBox GUT.newReload
localCategories' <- T.useLive T.unequal localCategories
let
selected = mCurrentDocId' == Just nodeId
pure $ TT.table
{ colNames
, container: TT.defaultContainer
......@@ -551,9 +553,9 @@ pagePaintRawCpt = here.component "pagePaintRaw" cpt where
}
where
sid = sessionId session
trashClassName Star_0 _ = "trash"
trashClassName _ true = "active"
trashClassName _ false = ""
trashClassName Star_0 _ = "page-paint-row page-paint-row--trash"
trashClassName _ true = "page-paint-row page-paint-row--active"
trashClassName _ false = ""
corpusDocument
| Just cid <- mCorpusId = Routes.CorpusDocument sid cid listId
| otherwise = Routes.Document sid listId
......@@ -563,7 +565,14 @@ pagePaintRawCpt = here.component "pagePaintRaw" cpt where
where
row dv@(DocumentsView r@{ _id, category }) =
{ row:
TT.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
TT.makeRow'
{ className: "page-paint-raw " <>
(selected ?
"page-paint-raw--selected" $
""
)
}
[ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
H.div { className: "" }
[ docChooser { boxes
, listId
......@@ -582,10 +591,17 @@ pagePaintRawCpt = here.component "pagePaintRaw" cpt where
--, H.input { type: "checkbox", defaultValue: checked, on: {click: click Trash} }
-- TODO show date: Year-Month-Day only
, H.div { className: tClassName } [ R2.showText r.date ]
, H.div { className: tClassName }
[ H.a { href: url frontends $ corpusDocument r._id, target: "_blank" }
[ H.text r.title ]
]
,
H.div
{ className: tClassName }
[
H.a
{ href: url frontends $ corpusDocument r._id
, target: "_blank"
, className: "text-primary"
}
[ H.text r.title ]
]
, H.div { className: tClassName } [ H.text $ showSource r.source ]
, H.div {} [ H.text $ maybe "-" show r.ngramCount ]
]
......@@ -623,11 +639,19 @@ docChooserCpt = here.component "docChooser" cpt
mCurrentDocId' <- T.useLive T.unequal mCurrentDocId
let selected = mCurrentDocId' == Just nodeId
eyeClass = if selected then "fa-eye" else "fa-eye-slash"
eyeClass = selected ? "eye" $ "eye-slash"
variant = selected ? Info $ Dark
pure $ H.div { className: "btn" } [
H.span { className: "fa " <> eyeClass
, on: { click: onClick selected } } []
pure $
H.div
{ className: "doc-chooser" }
[
B.iconButton
{ name: eyeClass
, overlay: false
, variant
, callback: onClick selected
}
]
where
onClick selected _ = do
......
......@@ -37,7 +37,7 @@ actionSearchCpt = here.component "actionSearch" cpt
cpt { boxes: { errors }, dispatch, id, session } _ = do
search <- T.useBox $ defaultSearch { node_id = id }
pure $ R.fragment
[ H.p { className: "action-search" }
[ H.p { className: "action-search m-1" }
[ H.text $ "Search and create a private "
<> "corpus with the search query as corpus name." ]
, searchBar { errors
......
......@@ -33,7 +33,7 @@ searchBarCpt = here.component "searchBar" cpt
where
cpt { errors, langs, onSearch, search, session } _ = do
--onSearchChange session s
pure $ H.div { className: "search-bar" }
pure $ H.div { className: "search-bar m-1" }
[ searchField { databases: allDatabases
, errors
, langs
......
This diff is collapsed.
module Gargantext.Components.NgramsTable.Search where
import Data.Nullable (Nullable, null)
import DOM.Simple as DOM
import Gargantext.Prelude
import DOM.Simple as DOM
import Data.Foldable (intercalate)
import Data.Nullable (Nullable, null)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -24,7 +28,7 @@ searchInputCpt = here.component "searchInput" cpt
where
cpt { searchQuery } _ = do
inputRef <- R.useRef null
pure $ R2.row
[ H.div { className: "col-12" }
[ H.div { className: "input-group" }
......@@ -46,14 +50,34 @@ searchButtonCpt = here.component "searchButton" cpt where
cpt { inputRef, searchQuery } _ = do
searchQuery' <- T.useLive T.unequal searchQuery
pure $ H.div { className: "input-group-prepend" }
[ if searchQuery' /= ""
pure $
H.div
{ className: intercalate " "
[ "search-button-prepend"
, "input-group-prepend"
]
}
[
if searchQuery' /= ""
then
H.button { className: "btn btn-danger"
, on: { click: \_ -> R2.setInputValue inputRef "" } }
-- T.write "" searchQuery } }
[ H.span {className: "fa fa-times"} []]
else H.span { className: "fa fa-search input-group-text" } []
B.button
{ variant: ButtonVariant Light
, callback: \_ -> R2.setInputValue inputRef ""
-- T.write "" searchQuery
, className: "input-group-text"
}
[
B.icon
{ name: "times"
, className: "text-danger"
}
]
else
B.icon
{ name: "search"
, className: "input-group-text"
}
]
type SearchFieldInputProps =
......@@ -67,7 +91,7 @@ searchFieldInputCpt :: R.Component SearchFieldInputProps
searchFieldInputCpt = here.component "searchFieldInput" cpt where
cpt { inputRef, searchQuery } _ = do
-- searchQuery' <- T.useLive T.unequal searchQuery
pure $ H.input { className: "form-control"
-- , defaultValue: searchQuery'
, name: "search"
......
module Gargantext.Components.NgramsTable.SyncResetButton where
import Gargantext.Prelude
import Effect.Aff (Aff)
import Effect.Class (liftEffect)
import FFI.Simple.Functions (delay)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
import Gargantext.Core.NgramsTable.Types (CoreAction(..), CoreDispatch, NgramsTablePatch)
import Gargantext.Prelude
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -32,9 +35,14 @@ syncResetButtonsCpt = here.component "syncResetButtons" cpt
let
hasChanges = ngramsLocalPatch /= mempty
hasChangesClass = if hasChanges then "" else " disabled"
synchronizingClass = if synchronizing' then " disabled" else ""
statusReset _ true = Disabled
statusReset false _ = Disabled
statusReset _ _ = Enabled
statusSync _ true = Deferred
statusSync false _ = Disabled
statusSync _ _ = Enabled
resetClick _ = do
performAction ResetPatches
......@@ -47,16 +55,24 @@ syncResetButtonsCpt = here.component "syncResetButtons" cpt
afterSync x
liftEffect $ T.write_ false synchronizing
pure $ H.div { className: "btn-toolbar" }
[ H.div { className: "btn-group mr-2" }
[ H.button { className: "btn btn-danger " <> hasChangesClass <> synchronizingClass
, on: { click: resetClick }
} [ H.text "Reset" ]
]
, H.div { className: "btn-group mr-2" }
[ H.button { className: "btn btn-primary " <> hasChangesClass <> synchronizingClass
, on: { click: synchronizeClick }
} [ H.text "Sync" ]
]
]
pure $
B.wad
[ "d-flex" ]
[
B.button
{ variant: ButtonVariant Light
, callback: resetClick
, status: statusReset hasChanges synchronizing'
}
[ H.text "Reset" ]
,
B.wad_ [ "mr-1", "d-inline-block" ]
,
B.button
{ variant: ButtonVariant Primary
, callback: synchronizeClick
, status: statusSync hasChanges synchronizing'
}
[ H.text "Sync" ]
]
module Gargantext.Components.NgramsTable.Tree where
import Gargantext.Prelude
import Data.Array as A
import Data.Either (Either(..))
import Data.Lens ((^..), (^.), view)
import Data.Lens.At (at)
import Data.Lens.Fold (folded)
import Data.Lens.Index (ix)
import Data.List (List)
import Data.List (List, intercalate)
import Data.List as L
import Data.Map (Map)
import Data.Map as Map
import Data.Maybe (Maybe(..), maybe, isJust)
import Data.Nullable (Nullable, null, toMaybe)
import Data.Maybe (Maybe(..), maybe)
import Data.Set (Set)
import Data.Set as Set
import DOM.Simple as DOM
import Effect (Effect)
import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
import Gargantext.Core.NgramsTable.Types (Action(..), NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch(..), NgramsTerm, _NgramsElement, _NgramsRepoElement, _PatchMap, _children, _list, _ngrams, _occurrences, ngramsTermText, replace)
import Effect.Aff (Aff)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
import Gargantext.Components.Table as Tbl
import Gargantext.Config.REST (logRESTError)
import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
import Gargantext.Core.NgramsTable.Types (Action(..), NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm, _NgramsElement, _NgramsRepoElement, _children, _list, _ngrams, _occurrences, ngramsTermText, replace)
import Gargantext.Hooks.Loader (useLoader)
import Gargantext.Prelude (Unit, bind, const, discard, map, mempty, not, otherwise, pure, show, unit, ($), (+), (/=), (<<<), (<>), (==), (>), (||))
import Gargantext.Prelude (Unit, bind, const, map, mempty, not, otherwise, pure, show, unit, ($), (+), (<<<), (<>), (==), (>), (||))
import Gargantext.Types as GT
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import React.DOM (a, span, text)
import React.DOM.Props as DOM
......@@ -55,7 +54,9 @@ renderNgramsTreeCpt :: R.Component RenderNgramsTree
renderNgramsTreeCpt = here.component "renderNgramsTree" cpt
where
cpt { getNgramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
pure $ H.ul {}
pure $
H.ul
{ className: "render-ngrams-tree" }
[ H.span { className: "tree" }
[ H.span { className: "righthanded" }
[ tree { getNgramsChildren
......@@ -118,13 +119,37 @@ treeLoaded :: Record TreeLoaded -> R.Element
treeLoaded p = R.createElement treeLoadedCpt p []
treeLoadedCpt :: R.Component TreeLoaded
treeLoadedCpt = here.component "treeLoaded" cpt where
cpt params@{ ngramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
cpt params@{ ngramsChildren
, ngramsClick
, ngramsDepth
, ngramsEdit
, ngramsStyle
} _ = do
pure $
H.li { style: { width : "100%" } }
([ H.i { className, style } [] ]
<> [ R2.buff $ tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ] ]
<> maybe [] edit (ngramsEdit ngramsDepth)
<> [ forest ngramsChildren ]
H.li
-- { className: "ngrams-tree-loaded-node" }
{ className: intercalate " "
[ "ngrams-tree-loaded-node"
, ngramsDepth.depth == 1 ?
"ngrams-tree-loaded-node--first-child" $
""
, ngramsDepth.depth > 1 ?
"ngrams-tree-loaded-node--grand-child" $
""
]
}
(
-- @NOTE #414: currently commenting this, as the below icon is not
-- a call-to-action, thus deceiving the user of possible
-- yet-to-become reveal/collapse node children feature
-- [ H.i { className, style } [] ]
-- <>
[ R2.buff $ tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ] ]
<>
maybe [] edit (ngramsEdit ngramsDepth)
<>
[ forest ngramsChildren ]
)
where
tag =
......@@ -133,10 +158,16 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
a (ngramsStyle <> [DOM.onClick $ const effect])
Nothing ->
span ngramsStyle
edit effect = [ H.text " "
, H.i { className: "fa fa-pencil"
, on: { click: const effect } } []
]
edit effect =
[
B.iconButton
{ name: "pencil"
, className: "ml-1"
, variant: Secondary
, callback: const effect
, overlay: false
}
]
leaf = L.null ngramsChildren
className = "fa fa-chevron-" <> if open then "down" else "right"
style = if leaf then {color: "#adb5bd"} else {color: ""}
......@@ -177,29 +208,55 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
, ngramsTable
} _ = do
isEditing' <- T.useLive T.unequal isEditing
pure $ Tbl.makeRow
[ H.div { className: "ngrams-selector" }
[ H.span { className: "ngrams-chooser fa fa-eye-slash"
, on: { click: onClick } } []
[
H.div
{ className: "text-center"
, style: { marginTop: "6px" }
}
[
B.iconButton
{ name: "eye-slash"
, status: Disabled -- see `onClick` behavior
, callback: onClick
, className: ""
}
]
, selected
, checkbox GT.MapTerm
, checkbox GT.StopTerm
, H.div {}
( if isEditing'
then [ H.a { on: { click: const $ dispatch $ ToggleChild true ngrams } }
[ H.i { className: "fa fa-plus" } [] ]
, R2.buff $ tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ]
]
else [ renderNgramsTree { getNgramsChildren: getNgramsChildren'
, ngramsClick
, ngramsDepth
, ngramsEdit
, ngramsStyle
, key: "" } ]
then
[
B.iconButton
{ name: "plus"
, className: "mr-1 align-bottom"
, overlay: false
, variant: Primary
, callback: const $ dispatch $ ToggleChild true ngrams
}
,
R2.buff $
tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ]
]
else
[
renderNgramsTree
{ getNgramsChildren: getNgramsChildren'
, ngramsClick
, ngramsDepth
, ngramsEdit
, ngramsStyle
, key: ""
}
]
)
, H.text $ show (ngramsElement ^. _NgramsElement <<< _occurrences)
,
B.wad'
[ "pl-3" ] $
show (ngramsElement ^. _NgramsElement <<< _occurrences)
]
where
ngramsDepth = { ngrams, depth: 0 }
......@@ -232,21 +289,42 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
-- | ngramsTransient = const Nothing
-- | otherwise = Just <<< dispatch <<< cycleTermListItem <<< view _ngrams
selected =
H.input { checked: Set.member ngrams ngramsSelection
, className: "checkbox"
, on: { change: const $ dispatch $ ToggleSelect ngrams }
, type: "checkbox"
}
B.wad
[ "text-center" ]
[
H.input
{ checked: Set.member ngrams ngramsSelection
, className: "checkbox"
, on: { change: const $ dispatch $ ToggleSelect ngrams }
, type: "checkbox"
, style:
{ cursor: "pointer"
, marginTop: "6px"
}
}
]
checkbox termList' =
let chkd = termList == termList'
termList'' = if chkd then GT.CandidateTerm else termList'
in
H.input { checked: chkd
, className: "checkbox"
, on: { change: const $ dispatch $ CoreAction $
setTermListA ngrams (replace termList termList'') }
, readOnly: ngramsTransient
, type: "checkbox" }
B.wad
[ "text-center" ]
[
H.input
{ checked: chkd
, className: "checkbox"
, on: { change: const $ dispatch $ CoreAction $
setTermListA ngrams (replace termList termList'') }
, readOnly: ngramsTransient
, type: "checkbox"
, style:
{ cursor: "pointer"
, marginTop: "6px"
}
}
]
ngramsTransient = tablePatchHasNgrams ngramsLocalPatch ngrams
-- ^ TODO here we do not look at ngramsNewElems, shall we?
ngramsOpacity
......
......@@ -306,6 +306,8 @@ tableCpt = here.component "table" cpt
makeRow :: Array R.Element -> R.Element
makeRow els = H.tr {} $ (\c -> H.td {} [c]) <$> els
makeRow' :: forall r. Record r -> Array R.Element -> R.Element
makeRow' p els = H.tr p $ (\c -> H.td {} [c]) <$> els
type FilterRowsParams =
(
......@@ -320,7 +322,8 @@ filterRows { params: { limit, offset } } rs = newRs
defaultContainer :: Record TableContainerProps -> R.Element
defaultContainer props = R.fragment $ props.syncResetButton <> controls
where
controls = [ R2.row
controls = [ H.div
{ className: "d-flex align-items-center mb-2" }
[ H.div {className: "col-md-4"} [ props.pageSizeDescription ]
, H.div {className: "col-md-4"} [ props.paginationLinks ]
, H.div {className: "col-md-4"} [ props.pageSizeControl ]
......@@ -374,7 +377,7 @@ sizeDDCpt = here.component "sizeDD" cpt
textDescription :: Int -> PageSizes -> Int -> R.Element
textDescription currPage pageSize totalRecords =
H.div {className: "row1"} [ H.div {className: ""} [ H.text msg ] ] -- TODO or col-md-6 ?
H.div {className: ""} [ H.text msg ] -- TODO or col-md-6 ?
where
start = (currPage - 1) * pageSizes2Int pageSize + 1
end' = currPage * pageSizes2Int pageSize
......
......@@ -4,6 +4,7 @@
@import "./_legacy/_tree"
@import "./_legacy/_code_editor"
@import "./_legacy/_styles"
@import "./_legacy/_list"
@import "./_legacy/_annotation"
@import "./_legacy/_folder_view"
@import "./_legacy/_phylo"
......
.table
$row-min-height: 48px
tr td
height: $row-min-height
///////////////////////
.page-paint-raw
&--selected
position: relative
td:first-child::before
@include fit-positions
content: ""
width: 3px
background-color: $info
position: absolute
///////////////////////
.page-paint-row
&--active
// font-weight: bold
&--trash
text-decoration: line-through
///////////////////////
.doc-chooser
$offset-top: 3px // flex alignment won't work, hence empirical value
padding-top: $offset-top
text-align: center
///////////////////////
.rating-group
$offset-top: 3px // flex alignment won't work, hence empirical value
display: flex
padding-top: $offset-top
&__action
// @XXX Glyphicon icons lack of homogeneous width
width: 14px
margin-right: space-x(1)
///////////////////////////////////////////////////:
.search-button-prepend
.input-group-text
// @XXX Glyphicon icons lack of homogeneous width
width: 41px
// @XXX Bootstrap adding unwanted `z-index` on "_input-group.scss"
z-index: initial
///////////////////////////////////////////////////:
.ngrams-table-container
&__header
display: flex
align-items: flex-start
&__item
padding: $card-spacer-y $card-spacer-x
&:not(:first-child)
margin-left: space-x(1)
&:not(:last-child)
margin-right: space-x(1)
&__add-term
// struggling to create harmonious vertical gutters due to Bootstrap adding
// helper classes surrounding the element
$offset-top: -8px
$offset-bottom: 12px
margin-top: $offset-top
margin-bottom: $offset-bottom
&__footer
padding: $card-spacer-y $card-spacer-x
&__item
text-align: center
///////////////////////////////////////////////////:
.ngrams-tree-edit-real
// empirical value fitting the best size of the render tree
$min-with: 416px
min-width: $min-with
width: fit-content // growing purpose
border-color: $primary
margin-top: space-x(2)
margin-bottom: space-x(2)
&__actions
display: flex
margin-top: space-x(2)
.b-button
margin-right: space-x(1)
//////////////////////////////////////////////////
.loaded-ngrams-table-header
text-align: center
margin-top: space-x(1.5)
margin-bottom: space-x(1.5)
&__icon
font-size: 16px
&__text
font-size: 22px
font-weight: bold
font-family: $headings-font-family
//////////////////////////////////////////////////
.ngrams-tree-loaded-node
&--first-child::before,
&--grand-child::before
color: $gray-400
font-size: 11px
margin-right: space-x(0.5)
@include right-handed
content: "└"
@include left-handed
content: "┘"
&--first-child
// empirical value where the child separator aligns with its parent text
$child-offset: -2px
margin-left: -2px
&--grand-child
// empirical value where the child separator aligns with its parent text
$child-offset: 13px
margin-left: 13px
......@@ -63,25 +63,6 @@
left: 50%
top: 50%
.table
tr
td
color: #005a9aff
.active
font-weight: bold
text-decoration: underline
.ngrams-selector
display: flex
.ngrams-chooser
padding: 3px
.trash
text-decoration: line-through
.action-search
margin: 10px
.search-bar
margin: 10px
/* */
......@@ -93,7 +74,6 @@
select.form-control
cursor: pointer
#app
width: 100%
......