Merge pull request #300 from MerginMaps/mm-theme-improvements

Mm theme improvements

Author: MarcelGeo

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss

@@ -12,12 +12,15 @@ h6 {
   overflow-wrap: break-word;
   min-width: 0;
 }
-body, p {
+body, p, dd, dl {
   margin: 0
 }
 p, span, dl {
   overflow-wrap: break-word;
 }
+dd {
+  overflow-wrap: anywhere;
+}
 a {
   text-decoration: inherit;
   color: inherit;
@@ -27,6 +30,10 @@ input, textarea {
   min-width: 0;
 }
 
+img {
+  max-width: 100%;
+}
+
 /** Primevue overrides */
 
 // Customization of infinite border of tabs using classes instead pt because, we want to have access to variables

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss

@@ -60,7 +60,7 @@ $panelContentTextColor: $textColor;
 
 /// Padding for the content section of a panel
 /// @group panel
-$panelContentPadding: 1rem;
+$panelContentPadding: .5rem;
 
 /// Border for the footer section of a panel
 /// @group panel
@@ -84,11 +84,11 @@ $accordionSpacing: 0;
 
 /// Border of an accordion panel header
 /// @group panel
-$accordionHeaderBorder: $panelHeaderBorder;
+$accordionHeaderBorder: 1px solid #dee2e6;
 
 /// Background of an accordion panel header
 /// @group panel
-$accordionHeaderBg: $panelHeaderBg;
+$accordionHeaderBg: var(--surface-section);
 
 /// Text color of an accordion panel header
 /// @group panel
@@ -100,11 +100,11 @@ $accordionHeaderFontWeight: $panelHeaderFontWeight;
 
 /// Padding of an accordion panel header
 /// @group panel
-$accordionHeaderPadding: $panelHeaderPadding;
+$accordionHeaderPadding: 1rem .5rem;
 
 /// Background of an accordion panel header in hover state
 /// @group panel
-$accordionHeaderHoverBg: #e9ecef;
+$accordionHeaderHoverBg: var(--light-green-500);
 
 /// Border of an accordion panel header in hover state
 /// @group panel
@@ -116,7 +116,7 @@ $accordionHeaderTextHoverColor: $textColor;
 
 /// Background of an accordion panel header in expanded state
 /// @group panel
-$accordionHeaderActiveBg: $panelHeaderBg;
+$accordionHeaderActiveBg: var(--surface-section);
 
 /// Border of an accordion panel header in expanded state
 /// @group panel
@@ -128,7 +128,7 @@ $accordionHeaderTextActiveColor: $textColor;
 
 /// Hover background of an accordion panel header in expanded state
 /// @group panel
-$accordionHeaderActiveHoverBg: #e9ecef;
+$accordionHeaderActiveHoverBg: var(--light-green-500);
 
 /// Hover border of an accordion panel header in expanded state
 /// @group panel
@@ -140,7 +140,7 @@ $accordionHeaderTextActiveHoverColor: $textColor;
 
 /// Border for a content section of an accordion panel
 /// @group panel
-$accordionContentBorder: $panelContentBorder;
+$accordionContentBorder: none;
 
 /// Background for a content section of an accordion panel
 /// @group panel
@@ -152,7 +152,7 @@ $accordionContentTextColor: $panelContentTextColor;
 
 /// Padding for a content section of an accordion panel
 /// @group panel
-$accordionContentPadding: $panelContentPadding;
+$accordionContentPadding: .5rem;
 
 /// Border for a parent element containing all the headers of a tabview
 /// @group panel
@@ -324,4 +324,4 @@ $splitterGutterBg:#f8f9fa;
 
 /// Background of the splitter gutter handle
 /// @group panel
-$splitterGutterHandleBg:#dee2e6;
+$splitterGutterHandleBg:#dee2e6;

web-app/packages/lib/src/common/components/AppPanelToggleable.vue

@@ -5,28 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <PPanel
-    v-bind="$props"
-    toggleable
-    :collapsed="collapsed"
-    :pt="{
-      header(options) {
-        return {
-          class: [
-            'surface-section border-none p-4 cursor-pointer',
-            // Toggle border radius by open / closed panel
-            options.state.d_collapsed
-              ? 'border-round-2xl'
-              : 'border-round-top-2xl'
-          ],
-          onclick: headerClick
-        }
-      },
-      content: {
-        class: 'border-none border-round-bottom-2xl p-4 pt-0'
-      }
-    }"
-  >
+  <PPanel v-bind="$props" toggleable :collapsed="collapsed" :pt="pt">
     <template v-if="$slots.header" #header>
       <slot name="header"></slot>
     </template>
@@ -56,11 +35,26 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <script lang="ts" setup>
 import { PanelProps } from 'primevue/panel'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps<PanelProps>()
 const collapsed = ref(props.collapsed)
 
+const pt = computed(() => ({
+  header: {
+    class: [
+      'surface-section border-none cursor-pointer',
+      // Toggle border radius by open / closed panel
+      collapsed.value ? 'border-round-2xl' : 'border-round-top-2xl',
+      props.pt?.header?.class ?? 'p-4'
+    ],
+    onclick: headerClick
+  },
+  content: {
+    class: 'border-none border-round-bottom-2xl p-4 pt-0'
+  }
+}))
+
 function headerClick() {
   collapsed.value = !collapsed.value
 }

web-app/packages/lib/src/mm-theme.ts

@@ -1,3 +1,4 @@
+import { AccordionPassThroughOptions } from 'primevue/accordion'
 import { AutoCompletePassThroughOptions } from 'primevue/autocomplete'
 import { ButtonPassThroughOptions } from 'primevue/button'
 import { DataViewPassThroughOptions } from 'primevue/dataview'
@@ -115,6 +116,14 @@ export default usePassThrough(
       root: 'justify-content-start font-semibold'
     } as InlineMessagePassThroughOptions,
     dialog: {
+      root(options) {
+        const isBottom = ['bottom', 'bottomright', 'bottomleft'].some(
+          (item) => item === options?.props?.position
+        )
+        return {
+          style: { marginBottom: isBottom ? 0 : null }
+        }
+      },
       header: {
         class: 'border-none border-round-top-2xl',
         style: {
@@ -126,8 +135,11 @@ export default usePassThrough(
       },
       closeButton:
         'text-2xl hover:surface-ground text-color-forest hover:text-color',
-      content: {
-        class: 'border-round-bottom-2xl'
+      content(options) {
+        const isBottom = ['bottom', 'bottomright', 'bottomleft'].some(
+          (item) => item === options?.props?.position
+        )
+        return isBottom ? '' : 'border-round-bottom-2xl'
       },
       mask: {
         style: { zIndex: 7 }
@@ -139,7 +151,14 @@ export default usePassThrough(
     tag: {
       root: 'title-t5',
       value: 'title-t5'
-    } as TagPassThroughOptions
+    } as TagPassThroughOptions,
+    accordion: {
+      accordiontab: {
+        headerAction: {
+          class: 'border-noround border-x-none'
+        }
+      }
+    } as AccordionPassThroughOptions
   },
   {}
 )

web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="flex flex-column py-4 gap-4">
+  <div class="flex flex-column gap-4 pb-4">
     <span class="flex p-float-label w-ful p-input-filled">
       <PInputText
         autofocus

web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue

@@ -61,12 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           v-if="mimetype && file.size < 104857600"
           class="flex flex-column align-items-center w-full py-4"
         >
-          <PImage
-            :src="downloadUrl"
-            v-if="mimetype.match('image')"
-            preview
-            imageClass="w-full"
-          />
+          <PImage :src="downloadUrl" v-if="mimetype.match('image')" preview />
           <div
             class="file-detail-code border-round-xl p-4 paragraph-p4 w-full"
             v-else-if="mimetype.match('text')"

web-app/packages/lib/src/modules/project/components/UploadPanel.vue

@@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <PDialog
     v-model:visible="visible"
     :position="isUnderOverlayBreakpoint ? 'topleft' : 'bottomright'"
-    class="upload-panel w-8 lg:w-3 mr-4 mb-4"
+    class="upload-panel w-8 lg:w-3"
+    :draggable="false"
   >
     <template #header>
       <p class="font-semibold">
@@ -30,16 +31,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <span class="paragraph-p5 opacity-80 capitalize">{{ key }}</span>
         <app-circle class="ml-auto">{{ upload.diff[key].length }}</app-circle>
       </div>
-      <div class="py-4 w-full">
-        <PButton
-          id="update-files-btn"
-          @click="confirmUpload"
-          :disabled="upload.running || remainingAnalyzingFiles > 0"
-          class="flex justify-content-center w-full text-center"
-        >
-          Update Changes
-        </PButton>
-      </div>
+      <PButton
+        id="update-files-btn"
+        @click="confirmUpload"
+        :disabled="upload.running || remainingAnalyzingFiles > 0"
+        class="mt-2 w-full my-4"
+        label="Update Changes"
+      />
     </div>
   </PDialog>
 </template>

web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue

@@ -60,16 +60,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         collapse-icon="ti ti-chevron-right"
         expand-icon="ti ti-chevron-down"
         :active-index="activeAccordionItems"
-        :pt="{
-          accordiontab: {
-            headerAction: {
-              class: 'surface-section border-x-none border-noround p-2'
-            },
-            content: {
-              class: 'border-none'
-            }
-          }
-        }"
       >
         <PAccordionTab
           v-for="item in changeTabs"
@@ -88,9 +78,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <div
             v-for="change in changes[item.key]"
             :key="change.path"
-            class="py-2 paragraph-p6"
+            class="paragraph-p6"
           >
-            <div class="flex align-items-center justify-content-between mb-2">
+            <div class="flex align-items-center justify-content-between mb-1">
               <span class="w-10 font-semibold">{{ change.path }}</span>
               <span class="flex-shrink-0">{{
                 $filters.filesize(

web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue

@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </app-section>
     </app-container>
     <div slot="right">
-      <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
+      <upload-panel v-if="upload" :namespace="namespace" />
     </div>
   </div>
 </template>