feat: Github star button in-app (#11695)

This commit is contained in:
Michael Kret
2024-11-13 18:10:34 +02:00
committed by GitHub
parent 145d0921b2
commit 0fd684d90c
10 changed files with 97 additions and 122 deletions

View File

@@ -18,6 +18,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useExecutionsStore } from '@/stores/executions.store';
import { usePushConnection } from '@/composables/usePushConnection';
import GithubButton from 'vue-github-button';
const router = useRouter();
const route = useRoute();
const locale = useI18n();
@@ -161,7 +163,7 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
</script>
<template>
<div>
<div class="container">
<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
<div v-show="!hideMenuBar" class="top-menu">
<WorkflowDetails
@@ -174,18 +176,35 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
:active="workflow.active"
:read-only="readOnly"
/>
<TabBar
v-if="onWorkflowPage"
:items="tabBarItems"
:model-value="activeHeaderTab"
@update:model-value="onTabSelected"
/>
</div>
<TabBar
v-if="onWorkflowPage"
:items="tabBarItems"
:model-value="activeHeaderTab"
@update:model-value="onTabSelected"
/>
</div>
<div class="github-button">
<GithubButton
href="https://github.com/n8n-io/n8n"
:data-color-scheme="uiStore.appliedTheme"
data-size="large"
data-show-count="true"
aria-label="Star n8n-io/n8n on GitHub"
>Star</GithubButton
>
</div>
</div>
</template>
<style lang="scss">
.container {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.main-header {
background-color: var(--color-background-xlight);
height: $header-height;
@@ -201,6 +220,18 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
font-size: 0.9em;
height: $header-height;
font-weight: 400;
padding: 0 var(--spacing-m) 0 var(--spacing-xs);
padding: 0 var(--spacing-m) 0 var(--spacing-m);
}
.github-button {
display: flex;
position: relative;
align-items: center;
height: $header-height;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
background-color: var(--color-background-xlight);
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
}
</style>