Merge pull request #3591 from tinykite/add-section-heading

Add SectionHeading and PermaLinkDetails components
harvard-lil · Aug 16, 2024 · 1a75e7d · 1a75e7d
2 parents 0decfc4 + 182a9c9
commit 1a75e7d
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 16 deletions.
diff --git a/perma_web/frontend/components/App.vue b/perma_web/frontend/components/App.vue
@@ -1,9 +1,11 @@
 <script setup>
 import CreateLink from './CreateLink.vue';
 import Toast from './Toast.vue';
+import PermaLinkDetails from './PermaLinkDetails.vue'
 import { onBeforeMount, watchEffect } from 'vue'
 import { getLinksRemainingStatus, getUserTypes, getUserOrganizations, getSponsoredFolders } from '../lib/store'
 import { globalStore } from '../stores/globalStore';
+import { showDevPlayground } from '../lib/consts'
 
 onBeforeMount(() => {
     globalStore.updateLinksRemaining(links_remaining)
@@ -26,4 +28,5 @@ watchEffect(() => {
 <template>
     <Toast />
     <CreateLink />
+    <PermaLinkDetails v-if="showDevPlayground" />
 </template>
diff --git a/perma_web/frontend/components/CaptureError.vue b/perma_web/frontend/components/CaptureError.vue
@@ -51,7 +51,6 @@ defineExpose({
 <template>
 
     <div class="container cont-fixed">
-        <UpdateGUID v-if="showDevPlayground" />
         <div v-if="globalStore.captureErrorMessage" id="error-container">
             <p class="message-large">{{ globalStore.captureErrorMessage }} <span v-if="showLoginLink">
                     Please <a href='/login'>log in</a> to continue.

diff --git a/perma_web/frontend/components/CreateLink.vue b/perma_web/frontend/components/CreateLink.vue
@@ -10,8 +10,6 @@ import FolderSelect from './FolderSelect.vue';
 import { useStorage } from '@vueuse/core'
 import CreateLinkBatch from './CreateLinkBatch.vue';
 import { getErrorFromNestedObject, getErrorFromResponseOrStatus, getErrorResponse, folderError, defaultError } from "../lib/errors"
-import IconButton from './IconButton.vue'
-import { showDevPlayground } from '../lib/consts'
 import { isLoading, readyStates, isReady } from '../lib/store'
 
 const batchDialogRef = ref('')
@@ -223,17 +221,8 @@ onBeforeUnmount(() => {
                     </button>
                 </p>
             </form><!--/#linker-->
-            <template v-if="showDevPlayground">
-            <IconButton icon="plus" name="New Folder" :handleClick="() => { console.log('New Folder') }"  />
-            <IconButton icon="edit" name="Rename Selected Folder" :handleClick="() => { console.log('Rename Folder') }"  />
-            <IconButton icon="trash" name="Delete Selected Folder" :handleClick="() => { console.log('Delete Selected Folder') }"  />
-            <IconButton icon="download-alt" name="Export Links" :handleClick="() => { console.log('Export Links') }"  />
-            <IconButton iconFamily="none" icon="chevron-down" name="Expand Link Batch History" :handleClick="() => { console.log('Expand Link Batch History') }"  />
-            <IconButton iconFamily="none" icon="chevron-up" name="Collapse Link Batch History" :handleClick="() => { console.log('Collapse Link Batch History') }"  />
-            </template>
         </div><!-- cont-full-bleed cont-sm-fixed -->
     </div><!-- container cont-full-bleed -->
-
     <CaptureError ref="uploadDialogRef" />
 
     <CreateLinkBatch ref="batchDialogRef" />

diff --git a/perma_web/frontend/components/IconButton.vue b/perma_web/frontend/components/IconButton.vue
@@ -34,9 +34,9 @@ const isChevron = props.icon === "chevron-down" || props.icon === "chevron-up";
       props.iconFamily === 'fontAwesome' ? `icon-${props.icon}` : ''
     }`"
   >
-    <svg v-if="isChevron" aria-hidden="true" width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path v-if="props.icon === 'chevron-down'" d="M8.84746 9L18 2.03226L16.1695 0L8.84746 5.48474L1.83051 7.77811e-08L0 2.03226L8.84746 9Z" fill="#2E76EE"/>
-      <path v-if="props.icon === 'chevron-up'" d="M8.84746 0L18 6.96774L16.1695 9L8.84746 3.51526L1.83051 9L0 6.96774L8.84746 0Z" fill="#2E76EE"/>
+    <svg v-if="isChevron" class="c-button__chevron" aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path v-if="props.icon === 'chevron-down'" d="M6.88136 7L14 1.58065L12.5763 0L6.88136 4.26591L1.42373 0L0 1.58065L6.88136 7Z" fill="#2E76EE"/>
+      <path v-if="props.icon === 'chevron-up'" d="M6.88136 0L14 5.41935L12.5763 7L6.88136 2.73409L1.42373 7L0 5.41935L6.88136 0Z" fill="#2E76EE"/>
     </svg>
     <span class="sr-only">{{ props.name }}</span>
   </button>

diff --git a/perma_web/frontend/components/PermaLinkDetails.vue b/perma_web/frontend/components/PermaLinkDetails.vue
@@ -0,0 +1,54 @@
+<script setup>
+  import SectionHeading from './SectionHeading.vue'
+  import IconButton from './IconButton.vue'
+</script>
+
+<template>
+  <div class="container cont-fixed manage-links">
+    <div class="row">
+      <div class="col-md-3">
+        <SectionHeading name="Link Batch History">
+          <template #iconButton>
+            <IconButton
+              icon="chevron-down"
+              iconFamily="none"
+              :handleClick="() => {console.log('Expand Link Batch History');}"
+            />
+          </template>
+        </SectionHeading>
+        <SectionHeading name="Folders">
+          <template #iconButton>
+            <IconButton
+              icon="plus"
+              name="New Folder"
+              :handleClick="() => {console.log('New Folder');}"
+
+            />
+            <IconButton
+              icon="edit"
+              name="Rename Selected Folder"
+              :handleClick="() => {console.log('Rename Selected Folder');}"
+            />
+            <IconButton
+              icon="trash"
+              name="Delete Selected Folder"
+              :handleClick="() => {console.log('Delete Selected Folder');}"
+            />
+          </template>
+        </SectionHeading>
+      </div>
+      <div class="col-md-9">
+        <SectionHeading name="Another Journal Links" icon="organization">
+          <template #iconButton>
+            <IconButton
+              icon="download-alt"
+              name="Export Links"
+              :handleClick="() => {console.log('Export Links');}"
+
+            />
+          </template>
+        </SectionHeading>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/perma_web/frontend/components/SectionHeading.vue b/perma_web/frontend/components/SectionHeading.vue
@@ -0,0 +1,30 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  icon: {
+    type: String,
+    validator(value) {
+      return [
+        "organization",
+      ].includes(value);
+    },
+  },
+});
+</script>
+
+<template>
+  <div class="c-sectionHeading">
+    <template v-if="!!icon">
+      <svg v-if="icon === 'organization'" aria-hidden="true" width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="18" height="20" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.73995 9.90178C4.39114 10.0982 4.03265 10.332 3.6354 10.6032C0.563971 12.6699 1.17438 18.8889 1.17438 18.8889H13.4504C13.4504 18.8889 14.0608 12.6699 10.9991 10.5938C10.6018 10.3226 10.2336 10.0888 9.89452 9.89243C11.2994 9.06012 12.2296 7.56383 12.2296 5.85245C12.2296 3.23394 10.0302 1.11108 7.31723 1.11108C4.6043 1.11108 2.40489 3.2433 2.40489 5.8618C2.40489 7.56383 3.33504 9.06012 4.73995 9.90178Z" fill="#2D76EE" stroke="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.10662 9.89243C7.75787 10.0888 7.39943 10.3226 7.00224 10.5938C3.93129 12.6699 4.5513 18.8889 4.5513 18.8889H16.8254C16.8254 18.8889 17.4357 12.6699 14.3745 10.5938C13.9773 10.3226 13.6091 10.0888 13.2701 9.89243C14.6748 9.06012 15.6048 7.56383 15.6048 5.85245C15.6048 3.23394 13.4057 1.11108 10.6932 1.11108C7.98068 1.11108 5.78161 3.23394 5.78161 5.85245C5.78161 7.55448 6.71162 9.05076 8.11631 9.89243H8.10662Z" fill="#2D76EE" stroke="white"/>
+      </svg>
+    </template>
+    <h3 class="c-sectionHeading__name">{{ props.name }}</h3>
+    <div v-if="$slots.iconButton" class="c-sectionHeading__iconButton">
+      <slot name="iconButton">
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
@@ -5872,18 +5872,27 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
 }
 
 .c-button--icon {
+  display: flex;
+  align-items: center;
   color: rgba(0, 0, 0, 0.4);
   font-size: 2rem;
   background: none;
   border: none;
-  margin-inline: 0.5rem;
   padding: 0;
 
   &:hover, &:focus {
     color: #2D76EE;
   }
 }
 
+.c-button--icon:not(:last-child) {
+  margin-inline-end: 1rem;
+}
+
+.c-button__chevron {
+  margin-inline: 1rem;
+}
+
 .c-button--link, .c-button--privateLink {
   padding: 0;
   background: none;
@@ -5925,6 +5934,29 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   }
 }
 
+.c-sectionHeading {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  justify-content: start;
+  gap: 0.6rem;
+  border-block-start: 2px solid $color-blue;
+  padding-block-start: $grid;
+  padding-block-end: $grid * 2;
+}
+
+.c-sectionHeading__name {
+  font-size: 2.2rem;
+  color: $color-blue;
+  font-family: $font-hed-alt;
+  font-weight: 700;
+}
+
+.c-sectionHeading__iconButton {
+  grid-column: -1 / -1;
+  justify-self: end;
+}
+
 /* CSS transition classes automatically added/removed by Vue */
 .fade-enter-active,
 .fade-leave-active {