Merge remote-tracking branch...

Merge remote-tracking branch 'origin/555-abstract-almost-disapear-in-graph-s-doc-view-when-there-is-too-much-authors' into dev

dist/styles/bootstrap-darkster.css

@@ -8236,6 +8236,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9324,6 +9330,55 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  align-self: end;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: normal;
+}
+#app .btn-seemore:hover,
+#portal .btn-seemore:hover {
+  color: #33A2FF;
+}
+#app .btn-seemore.collapsed::after,
+#portal .btn-seemore.collapsed::after {
+  content: "...⯆";
+}
+#app .btn-seemore:not(.collapsed),
+#portal .btn-seemore:not(.collapsed) {
+  transform: rotate(180deg);
+}
+#app .btn-seemore:not(.collapsed)::after,
+#portal .btn-seemore:not(.collapsed)::after {
+  content: "⯆   ";
+}
+#app .annotated-field-expand,
+#portal .annotated-field-expand {
+  min-height: 2.5rem;
+}
+#app .annotated-field-expand.collapse:not(.show),
+#portal .annotated-field-expand.collapse:not(.show) {
+  display: block;
+  overflow: hidden;
+  max-height: 2.5rem;
+}
+#app .annotated-field-expand.collapsing,
+#portal .annotated-field-expand.collapsing {
+  height: 2.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher,
+#portal .annotated-field-expand.variant-collapse-higher {
+  min-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapse:not(.show),
+#portal .annotated-field-expand.variant-collapse-higher.collapse:not(.show) {
+  max-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapsing,
+#portal .annotated-field-expand.variant-collapse-higher.collapsing {
+  height: 5.5rem;
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-default.css

@@ -8042,6 +8042,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9130,6 +9136,55 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  align-self: end;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: normal;
+}
+#app .btn-seemore:hover,
+#portal .btn-seemore:hover {
+  color: #005a9a;
+}
+#app .btn-seemore.collapsed::after,
+#portal .btn-seemore.collapsed::after {
+  content: "...⯆";
+}
+#app .btn-seemore:not(.collapsed),
+#portal .btn-seemore:not(.collapsed) {
+  transform: rotate(180deg);
+}
+#app .btn-seemore:not(.collapsed)::after,
+#portal .btn-seemore:not(.collapsed)::after {
+  content: "⯆   ";
+}
+#app .annotated-field-expand,
+#portal .annotated-field-expand {
+  min-height: 2.5rem;
+}
+#app .annotated-field-expand.collapse:not(.show),
+#portal .annotated-field-expand.collapse:not(.show) {
+  display: block;
+  overflow: hidden;
+  max-height: 2.5rem;
+}
+#app .annotated-field-expand.collapsing,
+#portal .annotated-field-expand.collapsing {
+  height: 2.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher,
+#portal .annotated-field-expand.variant-collapse-higher {
+  min-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapse:not(.show),
+#portal .annotated-field-expand.variant-collapse-higher.collapse:not(.show) {
+  max-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapsing,
+#portal .annotated-field-expand.variant-collapse-higher.collapsing {
+  height: 5.5rem;
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-greyson.css

@@ -7802,6 +7802,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -8890,6 +8896,55 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  align-self: end;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: normal;
+}
+#app .btn-seemore:hover,
+#portal .btn-seemore:hover {
+  color: #2f3c48;
+}
+#app .btn-seemore.collapsed::after,
+#portal .btn-seemore.collapsed::after {
+  content: "...⯆";
+}
+#app .btn-seemore:not(.collapsed),
+#portal .btn-seemore:not(.collapsed) {
+  transform: rotate(180deg);
+}
+#app .btn-seemore:not(.collapsed)::after,
+#portal .btn-seemore:not(.collapsed)::after {
+  content: "⯆   ";
+}
+#app .annotated-field-expand,
+#portal .annotated-field-expand {
+  min-height: 2.5rem;
+}
+#app .annotated-field-expand.collapse:not(.show),
+#portal .annotated-field-expand.collapse:not(.show) {
+  display: block;
+  overflow: hidden;
+  max-height: 2.5rem;
+}
+#app .annotated-field-expand.collapsing,
+#portal .annotated-field-expand.collapsing {
+  height: 2.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher,
+#portal .annotated-field-expand.variant-collapse-higher {
+  min-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapse:not(.show),
+#portal .annotated-field-expand.variant-collapse-higher.collapse:not(.show) {
+  max-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapsing,
+#portal .annotated-field-expand.variant-collapse-higher.collapsing {
+  height: 5.5rem;
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-herbie.css

@@ -8050,6 +8050,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9138,6 +9144,55 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  align-self: end;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: normal;
+}
+#app .btn-seemore:hover,
+#portal .btn-seemore:hover {
+  color: #083358;
+}
+#app .btn-seemore.collapsed::after,
+#portal .btn-seemore.collapsed::after {
+  content: "...⯆";
+}
+#app .btn-seemore:not(.collapsed),
+#portal .btn-seemore:not(.collapsed) {
+  transform: rotate(180deg);
+}
+#app .btn-seemore:not(.collapsed)::after,
+#portal .btn-seemore:not(.collapsed)::after {
+  content: "⯆   ";
+}
+#app .annotated-field-expand,
+#portal .annotated-field-expand {
+  min-height: 2.5rem;
+}
+#app .annotated-field-expand.collapse:not(.show),
+#portal .annotated-field-expand.collapse:not(.show) {
+  display: block;
+  overflow: hidden;
+  max-height: 2.5rem;
+}
+#app .annotated-field-expand.collapsing,
+#portal .annotated-field-expand.collapsing {
+  height: 2.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher,
+#portal .annotated-field-expand.variant-collapse-higher {
+  min-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapse:not(.show),
+#portal .annotated-field-expand.variant-collapse-higher.collapse:not(.show) {
+  max-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapsing,
+#portal .annotated-field-expand.variant-collapse-higher.collapsing {
+  height: 5.5rem;
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-monotony.css

@@ -8051,6 +8051,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9139,6 +9145,55 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  align-self: end;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: normal;
+}
+#app .btn-seemore:hover,
+#portal .btn-seemore:hover {
+  color: #222222;
+}
+#app .btn-seemore.collapsed::after,
+#portal .btn-seemore.collapsed::after {
+  content: "...⯆";
+}
+#app .btn-seemore:not(.collapsed),
+#portal .btn-seemore:not(.collapsed) {
+  transform: rotate(180deg);
+}
+#app .btn-seemore:not(.collapsed)::after,
+#portal .btn-seemore:not(.collapsed)::after {
+  content: "⯆   ";
+}
+#app .annotated-field-expand,
+#portal .annotated-field-expand {
+  min-height: 2.5rem;
+}
+#app .annotated-field-expand.collapse:not(.show),
+#portal .annotated-field-expand.collapse:not(.show) {
+  display: block;
+  overflow: hidden;
+  max-height: 2.5rem;
+}
+#app .annotated-field-expand.collapsing,
+#portal .annotated-field-expand.collapsing {
+  height: 2.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher,
+#portal .annotated-field-expand.variant-collapse-higher {
+  min-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapse:not(.show),
+#portal .annotated-field-expand.variant-collapse-higher.collapse:not(.show) {
+  max-height: 5.5rem;
+}
+#app .annotated-field-expand.variant-collapse-higher.collapsing,
+#portal .annotated-field-expand.variant-collapse-higher.collapsing {
+  height: 5.5rem;
+}
 
 .range-control {
   display: inline-flex;

src/Gargantext/Components/Annotation/Field.purs

@@ -9,7 +9,10 @@
 -- |
 -- | 1. We must only re-search the text when the ngrams change for performance
 -- | 2. We will need a more ambitious search algorithm for skipgrams.
-module Gargantext.Components.Annotation.Field where
+module Gargantext.Components.Annotation.Field
+  ( annotatedField
+  )
+  where
 
 import Gargantext.Prelude
 
@@ -52,6 +55,7 @@ type MouseEvent = E.SyntheticEvent DE.MouseEvent
 -- defaultProps :: Record Props
 -- defaultProps = { ngrams: NgramsTable Map.empty, text: Nothing, setTermList: \_ _ _ -> pure unit }
 
+
 annotatedField :: R2.Leaf Props
 annotatedField = R2.leaf annotatedFieldCpt
 annotatedFieldCpt :: R.Component Props
@@ -112,7 +116,9 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
           EditionMode ->
 
             H.div
-            { className: "annotated-field-runs" }
+            { className: "annotated-field-runs"
+            , aria: { expanded: false } 
+            }
             ((\p -> annotateRun p) <$> wrap <$> compile cache ngrams fieldText)
 
 
@@ -129,7 +135,6 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
                 , onSelect: onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList }
                 }
               ]
-
       ]
 
 -----------------------------------------------------------

src/Gargantext/Components/Document/Layout.purs

@@ -248,40 +248,53 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt where
         { className: "document-layout__body" }
         [
           H.div
-          { className: "document-layout__title" }
+          { className: "document-layout__title d-flex" }
+          [
+            H.div
+            { className: "document-layout__title__content" <> collapsibleClasses <> " variant-collapse-higher"
+                , id: getIdName "title" }
             [
               annotate doc.title
             ]
+          ,
+            btnSeeMore "title"
+          ]
         ,
           R2.fromMaybe doc.authors \authors ->
 
             H.div
-            { className: "document-layout__authors" }
+            { className: "document-layout__authors justify-content-space-between" }
             [
               B.div'
               { className: "document-layout__authors__label" }
               "Authors"
             ,
               H.div
-              { className: "document-layout__authors__content" }
+              { className: "document-layout__authors__content w-100" <> collapsibleClasses
+              , id: getIdName "authors" }
               [
                 -- @NOTE #386: annotate for "Authors" ngrams list
                 annotate (Just authors)
               ]
+            ,
+              btnSeeMore "authors"
             ]
         ,
           R2.fromMaybe doc.source \source ->
 
             H.div
-            { className: "document-layout__source" }
+            { className: "document-layout__source justify-content-space-between" }
             [
               B.div'
               { className: "document-layout__source__label" }
               "Source"
             ,
               B.div'
-              { className: "document-layout__source__content" }
+              { className: "document-layout__source__content w-100" <> collapsibleClasses
+              , id: getIdName "sources" }
               source
+            , 
+              btnSeeMore "sources"
             ]
         ,
             H.div
@@ -330,3 +343,20 @@ publicationDate (Document {publication_year: Nothing}) = ""
 publicationDate (Document {publication_year: Just py, publication_month: Nothing}) = U.zeroPad 2 py
 publicationDate (Document {publication_year: Just py, publication_month: Just pm, publication_day: Nothing}) = (U.zeroPad 2 py) <> "-" <> (U.zeroPad 2 pm)
 publicationDate (Document {publication_year: Just py, publication_month: Just pm, publication_day: Just pd}) = (U.zeroPad 2 py) <> "-" <> (U.zeroPad 2 pm) <> "-" <> (U.zeroPad 2 pd)
+
+
+btnSeeMore :: String -> R.Element
+btnSeeMore idStr = 
+  H.a { role: "button"
+  , className: "collapsed btn-seemore text-primary"
+  , data: { toggle: "collapse" }
+  , aria: { expanded: false, controls: getIdName idStr }
+  , href: "#" <> getIdName idStr
+  }
+  [ H.text "" ]
+
+getIdName :: String -> String
+getIdName str = "annotated-field-expand__" <> str
+
+collapsibleClasses :: String
+collapsibleClasses = " annotated-field-expand collapse"
\ No newline at end of file

src/sass/base/_utilities.scss

@@ -164,6 +164,11 @@
   .text-justify  { text-align: justify; }
   .text-wrap     { white-space: normal; }
   .text-nowrap   { white-space: nowrap; }
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   
   .text-left   { text-align: left;    }
   .text-right  { text-align: right;   }
@@ -351,4 +356,60 @@
       content: "\200B";
     }
   }
+
+
+  .btn-seemore {
+    align-self: end;
+    text-decoration: none;
+    font-size: 10px;
+    font-weight: normal;
+    &:hover {
+      color: $primary;
+    }
+    &.collapsed {
+      // transform: rotate(180deg);
+      &::after {
+        content: '...⯆';
+        // content: "...⮟";
+      }
+    }
+    &:not(.collapsed) {
+      transform: rotate(180deg);
+      &::after {
+        // content: '\00a0\00a0\00a0⮝';
+        content: '⯆\00a0\00a0\00a0';
+      }
+    }
+
+  }
+
+  $heightDefault: 2.5rem;
+  $heightHigher: 5.5rem;
+
+  .annotated-field-expand {
+    min-height: $heightDefault;
+    &.collapse {
+      &:not(.show) {
+        display: block;
+        overflow: hidden;
+        max-height: $heightDefault;
+      }
+    }
+    &.collapsing {
+      height: $heightDefault;
+    }
+
+    &.variant-collapse-higher {
+      min-height: $heightHigher;
+      &.collapse {
+        &:not(.show) {
+          max-height: $heightHigher;
+        }
+      }
+      &.collapsing {
+        height: $heightHigher;
+      }
+      }
+  }
+    
 }