Commit 186f03bf authored by arturo's avatar arturo

>>> continue

parent 3984c493
Pipeline #2982 failed with stage
in 0 seconds
......@@ -8776,29 +8776,64 @@ a:focus, a:hover {
margin-right: 8px;
}
.ngrams-tree-edit-real {
.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;
margin-left: 2.5em;
margin-right: 2.5em;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.ngrams-tree-edit-real__header {
margin-bottom: 8px;
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-tree-edit-real__body {
min-width: 400px;
width: fit-content;
.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-tree-edit-real__footer {
.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__footer .b-button {
.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";
}
.action-search {
margin: 10px;
}
......
......@@ -8729,29 +8729,63 @@ a:focus, a:hover {
margin-right: 8px;
}
.ngrams-tree-edit-real {
.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;
margin-left: 2.5em;
margin-right: 2.5em;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.ngrams-tree-edit-real__header {
margin-bottom: 8px;
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-tree-edit-real__body {
min-width: 400px;
width: fit-content;
.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-tree-edit-real__footer {
.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__footer .b-button {
.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;
}
.action-search {
margin: 10px;
}
......
......@@ -8485,29 +8485,64 @@ a:focus, a:hover {
margin-right: 8px;
}
.ngrams-tree-edit-real {
.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;
margin-left: 2.5em;
margin-right: 2.5em;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.ngrams-tree-edit-real__header {
margin-bottom: 8px;
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-tree-edit-real__body {
min-width: 400px;
width: fit-content;
.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-tree-edit-real__footer {
.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__footer .b-button {
.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";
}
.action-search {
margin: 10px;
}
......
......@@ -8733,29 +8733,64 @@ a:focus, a:hover {
margin-right: 8px;
}
.ngrams-tree-edit-real {
.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;
margin-left: 2.5em;
margin-right: 2.5em;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.ngrams-tree-edit-real__header {
margin-bottom: 8px;
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-tree-edit-real__body {
min-width: 400px;
width: fit-content;
.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-tree-edit-real__footer {
.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__footer .b-button {
.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";
}
.action-search {
margin: 10px;
}
......
......@@ -8734,29 +8734,64 @@ a:focus, a:hover {
margin-right: 8px;
}
.ngrams-tree-edit-real {
.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;
margin-left: 2.5em;
margin-right: 2.5em;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.ngrams-tree-edit-real__header {
margin-bottom: 8px;
.ngrams-table-container__header__item:not(:first-child) {
margin-left: 8px;
}
.ngrams-tree-edit-real__body {
min-width: 400px;
width: fit-content;
.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-tree-edit-real__footer {
.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__footer .b-button {
.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";
}
.action-search {
margin: 10px;
}
......
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"
......
......@@ -96,38 +96,84 @@
width: 14px
margin-right: space-x(1)
///////////////////////////////////////////////////:
.ngrams-tree-edit-real
// empirical value corresponding to the glass search icon of the above search
// bar, this will add an nested alignment telling the user that this feature
// is a deep feature reveals to zim
$gutter: 2.5em
.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
padding: $card-spacer-y $card-spacer-x
margin-left: $gutter
margin-right: $gutter
border-left: 1px solid $border-color
border-right: 1px solid $border-color
///////////////////////////////////////////////////:
.ngrams-table-container
&__header
margin-bottom: space-x(1)
display: flex
align-items: flex-start
&__body
// empirical value fitting the best size of the render tree
$body-min-with: 400px
&__item
padding: $card-spacer-y $card-spacer-x
min-width: 400px
width: fit-content
margin-bottom: space-x(1.5)
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
//////////////////////////////////////////////////
.action-search
margin: 10px
......
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