github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: changelog ui

pull/9323/head
DarkPhoenix2704 2 months ago
parent
b420d88616
commit
15910e4cf7
6 changed files with 155 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      packages/nc-gui/assets/nc-icons/youtube2.svg
  2. 61
      packages/nc-gui/components/feed/Changelog/Item.vue
  3. 26
      packages/nc-gui/components/feed/Changelog/index.vue
  4. 108
      packages/nc-gui/components/feed/Navigation.vue
  5. 10
      packages/nc-gui/components/feed/View.vue
  6. 2
      packages/nc-gui/utils/iconUtils.ts

11
packages/nc-gui/assets/nc-icons/youtube2.svg
Unescape View File

@ -0,0 +1,11 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Social Icons" clip-path="url(#clip0_47_9415)">
<path id="Vector" d="M19.6016 5.15454C19.4885 4.72906 19.2657 4.34073 18.9554 4.02842C18.6451 3.71612 18.2582 3.49079 17.8334 3.375C16.2698 2.95454 10.0198 2.95454 10.0198 2.95454C10.0198 2.95454 3.76978 2.95454 2.20614 3.375C1.78138 3.49079 1.39449 3.71612 1.08418 4.02842C0.773872 4.34073 0.55103 4.72906 0.437957 5.15454C0.0197754 6.725 0.0197754 10 0.0197754 10C0.0197754 10 0.0197754 13.275 0.437957 14.8455C0.55103 15.2709 0.773872 15.6593 1.08418 15.9716C1.39449 16.2839 1.78138 16.5092 2.20614 16.625C3.76978 17.0455 10.0198 17.0455 10.0198 17.0455C10.0198 17.0455 16.2698 17.0455 17.8334 16.625C18.2582 16.5092 18.6451 16.2839 18.9554 15.9716C19.2657 15.6593 19.4885 15.2709 19.6016 14.8455C20.0198 13.275 20.0198 10 20.0198 10C20.0198 10 20.0198 6.725 19.6016 5.15454Z" fill="#FF0302"/>
<path id="Vector_2" d="M7.97437 12.9739V7.02617L13.2016 10L7.97437 12.9739Z" fill="#FEFEFE"/>
</g>
<defs>
<clipPath id="clip0_47_9415">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

61
packages/nc-gui/components/feed/Changelog/Item.vue
Unescape View File

@ -0,0 +1,61 @@
<script setup lang="ts"></script>
<template>
<div class="block relative">
<div class="relative pb-12">
<div class="aside">
<div class="aside-divider">
<div class="aside-divider-dot"></div>
</div>
<div class="aside-inner">
<div class="text-sm text-gray-700 leading-5">August 16th 2024</div>
</div>
</div>
<div class="content">
<div class="flex flex-col py-6 gap-8">
<h1>Connect Kit</h1>
<p>
This update includes improvements to the CoinbaseWalletSDK connect popup and MockConnector . Fixed CoinbaseWalletSDK
connect popup now works on first interaction. MockConnector now working as intended.
</p>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.content {
@apply !pl-50;
}
.aside {
@apply absolute left-0 top-2 bottom-2 w-44;
.aside-inner {
@apply sticky top-0;
}
.aside-divider {
@apply absolute top-0 right-0 bottom-0 w-1.5;
&:before {
@apply absolute bg-[#E7E7E9] left-0 transform -translate-x-1/2;
content: '';
top: 6px;
bottom: -18px;
width: 2px;
border-radius: 2px;
}
.aside-divider-dot {
@apply sticky top-0
transform: translateY(calc(-50% + 3px)) translateX(50%);
&:before {
@apply bg-brand-500 absolute w-1.5 h-1.5 left-0 rounded-full transform -translate-x-1/2;
content: '';
}
}
}
}
</style>

26
packages/nc-gui/components/feed/Changelog/index.vue
Unescape View File

@ -0,0 +1,26 @@
<script setup lang="ts"></script>
<template>
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
<FeedChangelogItem />
</template>
<style scoped lang="scss"></style>

108
packages/nc-gui/components/feed/Navigation.vue
Unescape View File

@ -7,6 +7,8 @@ const emits = defineEmits(['update:activeKey'])
const activeKey = useVModel(props, 'activeKey', emits) const activeKey = useVModel(props, 'activeKey', emits)
const { $e } = useNuxtApp()
const navigationElements = [ const navigationElements = [
{ {
key: 'recents', key: 'recents',
@ -27,6 +29,38 @@ const navigationElements = [
description: 'Upcoming features', description: 'Upcoming features',
}, },
] ]
const socialLinks = [
{
key: 'youtube',
icon: iconMap.youtube,
title: 'NocoDB',
url: 'https://www.youtube.com/@nocodb',
},
{
key: 'twitter',
icon: iconMap.twitter,
title: '@nocodb',
url: 'https://x.com/nocodb',
},
{
key: 'discord',
icon: iconMap.discord,
title: 'NocoDB',
url: 'https://discord.gg/5RgZmkW',
},
{
key: 'reddit',
icon: iconMap.reddit,
title: 'r/NocoDB',
url: 'https://www.reddit.com/r/NocoDB',
},
]
const openLink = (url: string, key: string) => {
$e(`c:nocodb:${key}`)
window.open(url, '_blank')
}
</script> </script>
<template> <template>
@ -73,68 +107,20 @@ const navigationElements = [
</div> </div>
</div> </div>
</div> </div>
<NcMenu> <div class="flex flex-col gap-1">
<a <div
v-e="['c:nocodb:twitter']" v-for="social in socialLinks"
href="https://twitter.com/nocodb" :key="social.key"
target="_blank" class="flex items-center w-full cursor-pointer transition-all gap-2 px-3 py-2"
class="!underline-transparent" @click="openLink(social.url, social.key)"
rel="noopener noreferrer"
>
<NcMenuItem class="social-icon-wrapper group">
<GeneralIcon class="social-icon" icon="ncTwitter" />
<span class="menu-btn"> @nocodb </span>
</NcMenuItem>
</a>
<a
v-e="['c:nocodb:discord']"
href="https://discord.gg/5RgZmkW"
target="_blank"
class="!underline-transparent"
rel="noopener noreferrer"
>
<NcMenuItem class="social-icon-wrapper">
<GeneralIcon class="social-icon" icon="ncDiscord" />
<span class="menu-btn"> {{ $t('labels.community.joinDiscord') }} </span>
</NcMenuItem>
</a>
<a
v-e="['c:nocodb:reddit']"
href="https://www.reddit.com/r/NocoDB"
target="_blank"
class="!underline-transparent"
rel="noopener noreferrer"
> >
<NcMenuItem class="social-icon-wrapper"> <component :is="social.icon" class="w-5 h-5 stroke-transparent" />
<GeneralIcon class="social-icon" icon="ncReddit" /> <span class="text-[13px] text-gray-800 font-medium">
<span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span> {{ social.title }}
</NcMenuItem> </span>
</a> </div>
</NcMenu> </div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
menu-btn {
line-height: 1.5;
}
.menu-icon {
@apply w-4 h-4;
font-size: 1rem;
}
:deep(.ant-popover-inner-content) {
@apply !p-0 !rounded-md;
}
.social-icon {
@apply my-0.5 w-4 h-4 stroke-transparent;
}
.social-icon-wrapper {
@apply !w-5 !h-5 !text-gray-800;
.nc-icon {
@apply mr-0.15;
}
}
</style>

10
packages/nc-gui/components/feed/View.vue
Unescape View File

@ -4,8 +4,14 @@ const activeKey = ref('recents')
<template> <template>
<FeedHeader /> <FeedHeader />
<div class="flex gap-6 justify-center h-full">
<FeedNavigation v-model:active-key="activeKey" /> <FeedNavigation v-model:active-key="activeKey" class="flex-grow-1" />
<div style="height: calc(100% - var(--topbar-height) - 32px)" class="overflow-y-auto w-full mt-8">
<div>
<FeedChangelog v-if="activeKey === 'changelog'" />
</div>
</div>
</div>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

2
packages/nc-gui/utils/iconUtils.ts
Unescape View File

@ -531,6 +531,7 @@ import NcMousePointerIcon from '~icons/nc-icons-v2/mouse-pointer.svg'
import NcAlignLeftIcon from '~icons/nc-icons-v2/align-left.svg' import NcAlignLeftIcon from '~icons/nc-icons-v2/align-left.svg'
import NcHeartIcon from '~icons/nc-icons-v2/heart.svg' import NcHeartIcon from '~icons/nc-icons-v2/heart.svg'
import NcTrendingUpIcon from '~icons/nc-icons-v2/trending-up.svg' import NcTrendingUpIcon from '~icons/nc-icons-v2/trending-up.svg'
import NcYoutube2Icon from '~icons/nc-icons/youtube2.svg'
import NcSlash1 from '~icons/nc-icons/slash1' import NcSlash1 from '~icons/nc-icons/slash1'
@ -1338,6 +1339,7 @@ export const iconMap = {
ncPlaceholderIcon: NcPlaceholderIcon, ncPlaceholderIcon: NcPlaceholderIcon,
ncSpanner: NcSpanner, ncSpanner: NcSpanner,
ncScript: NcScript, ncScript: NcScript,
youtube: NcYoutube2Icon,
} }
export const getMdiIcon = (type: string): any => { export const getMdiIcon = (type: string): any => {

Write Preview
Loading…
Cancel
Save