ui: added verify icon in community list

inveniosoftware · Oct 17, 2024 · 35102b1 · 35102b1
1 parent 77ccdc3
commit 35102b1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/...ntic-ui/js/invenio_communities/community/communitiesItems/CommunityCompactItemComputer.js b/...ntic-ui/js/invenio_communities/community/communitiesItems/CommunityCompactItemComputer.js
@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 import _truncate from "lodash/truncate";
 
 import { Image, InvenioPopup } from "react-invenio-forms";
-import { Icon, Label, Item } from "semantic-ui-react";
+import { Icon, Label, Item, Popup } from "semantic-ui-react";
 import { CommunityTypeLabel, RestrictedLabel } from "../labels";
 
 export const CommunityCompactItemComputer = ({
@@ -46,7 +46,18 @@ export const CommunityCompactItemComputer = ({
               rel="noreferrer"
               aria-label={`${metadata.title} (${i18next.t("opens in new tab")})`}
             >
-              {metadata.title}
+              {metadata.title}{" "}
+              {result.is_verified && (
+                <p className="ml-5 display-inline-block">
+                  <Popup
+                    content="Verified community"
+                    trigger={
+                      <Icon size="small" color="green" name="check circle outline" />
+                    }
+                    position="top center"
+                  />
+                </p>
+              )}
             </a>
             <i className="small icon external primary" aria-hidden="true" />
           </div>

diff --git a/...mantic-ui/js/invenio_communities/community/communitiesItems/CommunityCompactItemMobile.js b/...mantic-ui/js/invenio_communities/community/communitiesItems/CommunityCompactItemMobile.js
@@ -10,7 +10,7 @@ import { RestrictedLabel } from "../labels";
 import _truncate from "lodash/truncate";
 import React from "react";
 import { Image, InvenioPopup } from "react-invenio-forms";
-import { Icon, Label } from "semantic-ui-react";
+import { Icon, Label, Popup } from "semantic-ui-react";
 import PropTypes from "prop-types";
 
 export const CommunityCompactItemMobile = ({
@@ -44,7 +44,18 @@ export const CommunityCompactItemMobile = ({
               rel="noreferrer"
               aria-label={`${metadata.title} (${i18next.t("opens in new tab")})`}
             >
-              {metadata.title}
+              {metadata.title}{" "}
+              {result.is_verified && (
+                <p className="ml-5 display-inline-block">
+                  <Popup
+                    content="Verified community"
+                    trigger={
+                      <Icon size="small" color="green" name="check circle outline" />
+                    }
+                    position="top center"
+                  />
+                </p>
+              )}
             </a>
             <i className="small icon external primary" aria-hidden="true" />
           </div>

diff --git a/...ts/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemComputer.js b/...ts/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemComputer.js
@@ -9,7 +9,7 @@ import { CommunityTypeLabel } from "../labels";
 import { RestrictedLabel } from "../labels";
 import React from "react";
 import { Image } from "react-invenio-forms";
-import { Button, Grid, Icon } from "semantic-ui-react";
+import { Button, Grid, Icon, Popup, Header } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import OrganizationsList from "../../organizations/OrganizationsList";
 
@@ -39,14 +39,33 @@ export const CommunityItemComputer = ({ result }) => {
                 <RestrictedLabel access={result.access.visibility} />
               </div>
             )}
-            <a className="ui medium header mb-0" href={result.links.self_html}>
+            <Header as="a" className="ui medium header" href={result.links.self_html}>
               {result.metadata.title}
-            </a>
+              {result.is_verified && (
+                <p className="ml-5 display-inline-block">
+                  <Popup
+                    content="Verified community"
+                    trigger={
+                      <Icon size="small" color="green" name="check circle outline" />
+                    }
+                    position="top center"
+                  />
+                </p>
+              )}
+            </Header>
             {result.metadata.description && (
               <p className="truncate-lines-1 text size small text-muted mt-5">
                 {result.metadata.description}
               </p>
             )}
+            {result.parent && (
+              <div className="sub header">
+                Part of{" "}
+                <a href={`/communities/${result.parent.slug}`}>
+                  {result.parent.metadata.title}
+                </a>
+              </div>
+            )}
 
             {(communityType ||
               result.metadata.website ||

diff --git a/...sets/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemMobile.js b/...sets/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemMobile.js
@@ -9,7 +9,7 @@ import { CommunityTypeLabel } from "../labels";
 import { RestrictedLabel } from "../labels";
 import React from "react";
 import { Image } from "react-invenio-forms";
-import { Button, Grid, Icon } from "semantic-ui-react";
+import { Button, Grid, Icon, Popup, Header } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import OrganizationsList from "../../organizations/OrganizationsList";
 
@@ -41,12 +41,20 @@ export const CommunityItemMobile = ({ result, index }) => {
               alt=""
             />
             <div>
-              <a
-                className="truncate-lines-2 ui medium header m-0"
-                href={result.links.self_html}
-              >
+              <Header as="a" className="ui medium header" href={result.links.self_html}>
                 {result.metadata.title}
-              </a>
+                {result.is_verified && (
+                  <p className="ml-5 display-inline-block">
+                    <Popup
+                      content="Verified community"
+                      trigger={
+                        <Icon size="small" color="green" name="check circle outline" />
+                      }
+                      position="top center"
+                    />
+                  </p>
+                )}
+              </Header>
             </div>
           </div>
         </Grid.Column>
@@ -80,6 +88,14 @@ export const CommunityItemMobile = ({ result, index }) => {
           </Grid.Column>
         </Grid.Row>
       )}
+      {result.parent && (
+        <div className="pl-0 sub header">
+          Part of{" "}
+          <a href={`/communities/${result.parent.slug}`}>
+            {result.parent.metadata.title}
+          </a>
+        </div>
+      )}
 
       {(communityType || result.metadata.website || result.metadata.organizations) && (
         <Grid.Row className="pt-0">

diff --git a/invenio_communities/templates/semantic-ui/invenio_communities/details/header.html b/invenio_communities/templates/semantic-ui/invenio_communities/details/header.html
@@ -76,7 +76,7 @@
               {% endif %}          
               {% if community.parent %}
                 <div class="inline-computer mt-5 rel-mr-1">              
-                  <i class="sitemap icon" aria-hidden="true"></i>
+                  <span class="ui tiny header">Part of </span>
                   <a
                   href="{{ url_for('invenio_app_rdm_communities.communities_home', pid_value=community.parent.slug) }}">
                   {{community.parent.metadata.title}}