Add ability to place social badge inside code window

stevebauman · Oct 20, 2024 · 478b6b9 · 478b6b9
1 parent 0ef0811
commit 478b6b9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/components/SocialBadge.vue b/components/SocialBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-1 flex items-center border">
+    <div class="p-1 flex items-center">
         <SocialBadgeIcon class="w-8" :type="type" />
 
         <div class="px-2 space-y-0.5">

diff --git a/components/Window.vue b/components/Window.vue
@@ -157,24 +157,30 @@
 
         <div
             v-if="settings.showSocialBadge"
-            class="absolute flex w-full"
+            class="absolute flex w-full h-fit"
             :class="{
-                'justify-start': settings.socialPosition === 'bottom-left',
-                'justify-center': settings.socialPosition === 'bottom-center',
-                'justify-end': settings.socialPosition === 'bottom-right',
+                'bottom-2': settings.socialPosition.includes('inside'),
+                'mt-2': settings.socialPosition.includes('bottom'),
+
+                'left-2': settings.socialPosition.includes('inside-left'),
+                'right-2': settings.socialPosition.includes('inside-right'),
+
+                'justify-start': settings.socialPosition.includes('left'),
+                'justify-center': settings.socialPosition.includes('center'),
+                'justify-end': settings.socialPosition.includes('right'),
             }"
         >
             <SocialBadge
-                class="mt-4"
                 :type="settings.socialType"
                 :username="settings.socialUsername"
                 :display-name="settings.socialDisplayName"
                 :style="{
                     color: fontColor,
-                    borderColor: borderColor,
-                    boxShadow: boxShadowWithAccent,
+                    borderColor: `rgba(${borderColorRgba})`,
                     backgroundColor: settings.themeBackground,
                     borderRadius: `${settings.socialBorderRadius}px`,
+                    borderWidth: settings.showBorder ? borderWidth : 0,
+                    boxShadow: settings.showBorder ? boxShadow : boxShadowWithAccent,
                 }"
             />
         </div>

diff --git a/composables/useSettings.js b/composables/useSettings.js
@@ -90,6 +90,7 @@ export default function (defaults = {}) {
         socialDisplayName: preferences.socialDisplayName,
         socialPosition: preferences.socialPosition,
         socialBorderRadius: 25,
+        socialLocation: 'outside',
     };
 
     const settings = reactive(applyDefaults(cloneDeep(defaults), settingsDefaults));

diff --git a/composables/useSocials.js b/composables/useSocials.js
@@ -8,9 +8,13 @@ export default function () {
     ];
 
     const positions = [
-        { title: 'Left', name: 'bottom-left' },
-        { title: 'Center', name: 'bottom-center' },
-        { title: 'Right', name: 'bottom-right' },
+        { title: 'Inside Left', name: 'inside-left' },
+        { title: 'Inside Center', name: 'inside-center' },
+        { title: 'Inside Right', name: 'inside-right' },
+
+        { title: 'Bottom Left', name: 'bottom-left' },
+        { title: 'Bottom Center', name: 'bottom-center' },
+        { title: 'Bottom Right', name: 'bottom-right' },
     ];
 
     return {