Merge pull request #852 from NFDI4Chem/info-icons

feat: add info icons
NFDI4Chem · Oct 18, 2023 · c521673 · c521673
2 parents b126b79 + 93be760
commit c521673
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 34 deletions.
diff --git a/resources/js/Pages/Project/Show.vue b/resources/js/Pages/Project/Show.vue
@@ -97,6 +97,7 @@
                                     called-from="projectView"
                                     model="project"
                                 />
+
                                 <a
                                     class="cursor-pointer hover:text-teal-900 inline-flex items-center ml-7"
                                     @click="toggleDetails"

diff --git a/resources/js/Pages/Study/About.vue b/resources/js/Pages/Study/About.vue
@@ -517,6 +517,10 @@
                                                     >
                                                         Percentage composition
                                                         ({{ percentage }}%)
+                                                        <ToolTip
+                                                            class="inline h-4 w-12 ml-0"
+                                                            text="If the molecule percentage is unknown, please keep it as 0."
+                                                        ></ToolTip>
                                                     </label>
                                                     <slider
                                                         v-model="percentage"

diff --git a/resources/js/Pages/Study/Layout.vue b/resources/js/Pages/Study/Layout.vue
@@ -109,7 +109,7 @@
                                     class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
                                 >
                                     <div
-                                        class="mt-2 flex items-center text-sm text-gray-500"
+                                        class="mt-2 flex items-center text-sm text-gray-700"
                                     >
                                         <access-dialogue
                                             :available-roles="availableRoles"
@@ -121,6 +121,32 @@
                                             :model="model"
                                             called-from="studyView"
                                         />
+                                        <a
+                                            class="cursor-pointer inline-flex items-center"
+                                            @click="toggleDetails"
+                                        >
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 24 24"
+                                                class="w-4 h-4"
+                                            >
+                                                <path
+                                                    d="M4 15a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7a1 1 0 0 1 .7.3L13.42 5H21a1 1 0 0 1 .9 1.45L19.61 11l2.27 4.55A1 1 0 0 1 21 17h-8a1 1 0 0 1-.7-.3L10.58 15H4z"
+                                                    class="fill-current text-gray-400"
+                                                ></path>
+                                                <rect
+                                                    width="2"
+                                                    height="20"
+                                                    x="2"
+                                                    y="2"
+                                                    rx="1"
+                                                    class="fill-current text-gray-600"
+                                                ></rect>
+                                            </svg>
+                                            <span class="ml-2"
+                                                >View details</span
+                                            ></a
+                                        >
                                         <div class="ml-3">
                                             <span
                                                 v-if="study.is_public"
@@ -204,17 +230,6 @@
                                     <div
                                         class="mt-2 flex items-center text-sm text-gray-500"
                                     >
-                                        <a
-                                            class="cursor-pointer inline-flex items-center"
-                                            @click="toggleDetails"
-                                            ><ExclamationCircleIcon
-                                                class="h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                                                aria-hidden="true"
-                                            />
-                                            <span class="ml-2"
-                                                >View details</span
-                                            ></a
-                                        >
                                         <span
                                             class="capitalize inline-flex pr-4 ml-7 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
                                         >

diff --git a/resources/js/Shared/AccessDialogue.vue b/resources/js/Shared/AccessDialogue.vue
@@ -1,14 +1,28 @@
 <template>
     <div
-        class="cursor-pointer flex flex-row-reverse justify-end"
+        class="cursor-pointer flex flex-row-reverse justify-end mr-2"
         @click="open = true"
     >
-        <img
+        <div
             v-if="members.length > 0"
-            class="w-8 h-8 -ml-4 rounded-full border-2 border-white"
-            src="https://ui-avatars.com/api/?name=+&color=7F9CF5&background=EBF4FF"
+            class="tooltip w-8 h-8 -ml-.5 rounded-full border-2 border-white bg-gray-100"
             alt=""
-        />
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 m-1.5 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+            >
+                <path
+                    d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
+                />
+            </svg>
+            <span
+                class="bg-gray-900 text-center text-white px-2 py-1 shadow-lg rounded-md tooltiptextbottom"
+                >Click here to edit sharing options.</span
+            >
+        </div>
         <img
             v-for="user in members"
             :key="user.id"
@@ -29,23 +43,6 @@
             :src="team.owner.profile_photo_url"
             :alt="team.owner.first_name"
         />
-        <span v-if="members.length == 0 && !team">
-            <button
-                type="button"
-                class="inline-flex items-center px-0 py-2 ronded-md font-medium text-dark sm:text-sm"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                    <path
-                        d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
-                    /></svg
-                >&nbsp; SHARE
-            </button>
-        </span>
     </div>
     <TransitionRoot :show="open" as="template" appear @after-leave="query = ''">
         <Dialog as="div" class="relative z-10 p-4" @close="open = false">