-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #874 from hit-pay/new-sidebar-ui
feat:added new UI sidebar
- Loading branch information
Showing
16 changed files
with
349 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
packages/core/src/Elements/Sidebar/OcAccountSetupProgress.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <template> | ||
| <div class="border relative z-10 border-oc-gray-200 shadow-normal bg-white rounded p-2 flex flex-col gap-y-2"> | ||
| <div class="py-2 px-3 gap-x-3 flex items-center"> | ||
| <div class="text-oc-warning flex-1">Finish your account ({{ value }}%)</div> | ||
| <Icon name="arrow-top-right" class="text-oc-text-300 hover:text-oc-text" width="14" height="14" @click="$emit('redirect')" /> | ||
| </div> | ||
|
|
||
| <div class="px-3 pb-3 flex flex-col gap-y-3"> | ||
| <div class="relative bg-oc-accent-1-50 rounded-full h-2"> | ||
| <div class="absolute top-0 left-0 bg-oc-primary rounded-full h-2" :style="{ width: `${value}%` }"></div> | ||
| </div> | ||
| <div class="flex items-center gap-x-3"> | ||
| <div class="w-[6px] h-[6px] bg-oc-success shadow-[0_0_0_4px_var(--oc-success-50)] rounded-full" /> | ||
| <span class="text-sm text-oc-text-400">{{ infoLabel }}</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { Icon } from '@/orchidui-core' | ||
| defineProps({ | ||
| value: { | ||
| type: Number, | ||
| default: 0 | ||
| }, | ||
| infoLabel: { | ||
| type: String, | ||
| default: '' | ||
| } | ||
| }) | ||
| defineEmits(['redirect']) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,21 @@ | ||
| import Sidebar from './OcSidebar.vue' | ||
| import SidebarSubmenu from './OcSidebarSubmenu.vue' | ||
| import AccountSetup from './OcAccountSetup.vue' | ||
| import SidebarHead from './OcSidebarHead.vue' | ||
| import SideBarMenu from './OcSidebarMenu.vue' | ||
| import SidebarSubMenuItem from './OcSidebarSubMenuItem.vue' | ||
| import SidebarFooter from './OcSidebarFooter.vue' | ||
| import SidebarFeatureBanners from './OcSidebarFeatureBanners.vue' | ||
| import AccountSetupProgress from './OcAccountSetupProgress.vue' | ||
|
|
||
| export { Sidebar, SidebarSubmenu, AccountSetup } | ||
| export { | ||
| Sidebar, | ||
| SidebarSubmenu, | ||
| AccountSetup, | ||
| SidebarHead, | ||
| SideBarMenu, | ||
| SidebarSubMenuItem, | ||
| SidebarFooter, | ||
| SidebarFeatureBanners, | ||
| AccountSetupProgress | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/core/src/Elements/Sidebar/OcSidebarFeatureBanners.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <template> | ||
| <div class="relative"> | ||
| <div class="border absolute top-2 left-0 w-full h-[calc(100%-4px)] border-oc-gray-200 rounded pt-2"> | ||
| </div> | ||
| <div class="border relative z-10 bg-white border-oc-gray-200 shadow-normal rounded p-2 flex flex-col gap-y-2"> | ||
| <div class="py-2 px-3 gap-x-3 flex items-center"> | ||
| <Icon name="sparkle-2" class="text-oc-accent-2" /> | ||
| <div class="text-oc-accent-2 flex-1 font-medium"> | ||
| {{ title }} | ||
| </div> | ||
| <div class="flex items-center gap-x-2"> | ||
| <Icon name="x" class="text-oc-text-300 hover:text-oc-text" width="14" height="14" @click="$emit('close')" /> | ||
| <Icon name="arrow-top-right" class="text-oc-text-300 hover:text-oc-text" width="14" height="14" @click="$emit('redirect')" /> | ||
| </div> | ||
| </div> | ||
| <div class="px-3 pb-3 text-oc-text-400 text-sm">{{ description }}</div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { Icon } from '@/orchidui-core' | ||
| defineProps({ | ||
| isStacked: { | ||
| type: Boolean, | ||
| default: false | ||
| }, | ||
| title: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| description: { | ||
| type: String, | ||
| default: '' | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <template> | ||
| <div | ||
| class="py-4 sticky bottom-0 left-0 px-6 bg-oc-gray-50 border-t border-oc-gray-200" > | ||
| <div class="flex flex-col gap-y-3"> | ||
| <slot v-if="isExpanded"></slot> | ||
| <div | ||
| class="flex items-center gap-x-3" | ||
| :class="{ | ||
| 'flex-col gap-y-4': !isExpanded | ||
| }" | ||
| > | ||
| <div class="px-3 flex flex-1 items-center gap-x-3 text-oc-primary" @click="$emit('support-click')"> | ||
| <Icon name="chat-2" width="18" height="18" /> | ||
| <span v-if="isExpanded">Contact support</span> | ||
| </div> | ||
| <Avatar :size="32" class="shrink-0 uppercase" @click="$emit('user-click')">{{ displayName || 'J' }}</Avatar> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { Avatar, Icon } from '@/orchidui-core' | ||
| defineProps({ | ||
| displayName: String, | ||
| isExpanded: Boolean | ||
| }) | ||
| defineEmits(['user-click', 'support-click']) | ||
| </script> |
Oops, something went wrong.