eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add new links card and feature flag system for incremental dev. (#1714)

Browse Source 
* Add new links card and feature flag system for incremental dev.

* Switch to env variable for dev flags

* Add members card

* fix order of creators card

* Fix owner icon color and bring org owner to top of list

* lint + other fixes

* Revamp feature flag system, add flag config page

* Add button to flags page in dev mode

* fix env overrides

* make typescript happy with the refs
This commit is contained in:
Prospector
2024-06-11 19:46:07 -07:00
committed by GitHub
parent 5b2d36e976
commit 1d9fe0c03d
32 changed files with 1325 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/ui/Badge.vue
View File

@@ -65,7 +65,7 @@ defineProps({
.badge {
font-weight: bold;
width: fit-content;
--badge-color: var(--color-special-gray);
--badge-color: var(--color-gray);
color: var(--badge-color);
white-space: nowrap;
@@ -88,7 +88,7 @@ defineProps({
&.type--withheld,
&.type--rejected,
&.red {
--badge-color: var(--color-special-red);
--badge-color: var(--color-red);
}
&.type--pending,
@@ -96,7 +96,7 @@ defineProps({
&.type--processing,
&.type--scheduled,
&.orange {
--badge-color: var(--color-special-orange);
--badge-color: var(--color-orange);
}
&.type--accepted,
@@ -104,23 +104,23 @@ defineProps({
&.type--success,
&.type--approved-general,
&.green {
--badge-color: var(--color-special-green);
--badge-color: var(--color-green);
}
&.type--creator,
&.type--approved,
&.blue {
--badge-color: var(--color-special-blue);
--badge-color: var(--color-blue);
}
&.type--unlisted,
&.purple {
--badge-color: var(--color-special-purple);
--badge-color: var(--color-purple);
}
&.type--private,
&.gray {
--badge-color: var(--color-special-gray);
--badge-color: var(--color-gray);
}
}
</style>

12
components/ui/NotificationItem.vue
View File

@@ -249,7 +249,7 @@
>
<CheckIcon /> Mark as read
</button>
<CopyCode v-if="cosmetics.developerMode" :text="notification.id" />
<CopyCode v-if="flags.developerMode" :text="notification.id" />
</div>
<div v-else class="input-group">
<nuxt-link
@@ -281,7 +281,7 @@
>
<CheckIcon /> Mark as read
</button>
<CopyCode v-if="cosmetics.developerMode" :text="notification.id" />
<CopyCode v-if="flags.developerMode" :text="notification.id" />
</div>
</div>
</div>
@@ -335,7 +335,7 @@ const props = defineProps({
},
})
const cosmetics = useCosmetics()
const flags = useFeatureFlags()
const tags = useTags()
const type = computed(() =>
@@ -549,7 +549,7 @@ function getMessages() {
}
.unknown-type {
color: var(--color-special-red);
color: var(--color-red);
}
.title-link {
@@ -560,11 +560,11 @@ function getMessages() {
}
.moderation-color {
color: var(--color-special-orange);
color: var(--color-orange);
}
.creator-color {
color: var(--color-special-blue);
color: var(--color-blue);
}
}
</style>

16
components/ui/Notifications.vue
View File

@@ -26,8 +26,8 @@ function stopTimer(notif) {
</script>
<style lang="scss" scoped>
.vue-notification {
background: var(--color-special-blue) !important;
border-left: 5px solid var(--color-special-blue) !important;
background: var(--color-blue) !important;
border-left: 5px solid var(--color-blue) !important;
color: var(--color-brand-inverted) !important;
box-sizing: border-box;
@@ -37,18 +37,18 @@ function stopTimer(notif) {
margin: 0 5px 5px;
&.success {
background: var(--color-special-green) !important;
border-left-color: var(--color-special-green) !important;
background: var(--color-green) !important;
border-left-color: var(--color-green) !important;
}
&.warn {
background: var(--color-special-orange) !important;
border-left-color: var(--color-special-orange) !important;
background: var(--color-orange) !important;
border-left-color: var(--color-orange) !important;
}
&.error {
background: var(--color-special-red) !important;
border-left-color: var(--color-special-red) !important;
background: var(--color-red) !important;
border-left-color: var(--color-red) !important;
}
}

2
components/ui/ProjectCard.vue
View File

@@ -414,7 +414,7 @@ export default {
svg {
width: auto;
color: var(--color-special-orange);
color: var(--color-orange);
height: 1.5rem;
margin-bottom: -0.25rem;
}

16
components/ui/ProjectMemberHeader.vue
View File

@@ -428,15 +428,15 @@ const submitForReview = async () => {
align-items: center;
.required {
color: var(--color-special-red);
color: var(--color-red);
}
.suggestion {
color: var(--color-special-purple);
color: var(--color-purple);
}
.review {
color: var(--color-special-orange);
color: var(--color-orange);
}
}
@@ -467,7 +467,7 @@ const submitForReview = async () => {
.circle {
--circle-size: 2rem;
--background-color: var(--color-bg);
--content-color: var(--color-special-gray);
--content-color: var(--color-gray);
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
@@ -483,19 +483,19 @@ const submitForReview = async () => {
}
&.required {
--content-color: var(--color-special-red);
--content-color: var(--color-red);
}
&.suggestion {
--content-color: var(--color-special-purple);
--content-color: var(--color-purple);
}
&.review {
--content-color: var(--color-special-orange);
--content-color: var(--color-orange);
}
&.done {
--background-color: var(--color-special-green);
--background-color: var(--color-green);
--content-color: var(--color-brand-inverted);
}
}

2
components/ui/charts/ChartDisplay.vue
View File

@@ -507,7 +507,7 @@ const defaultRanges: Record<number, [string, number] | string> = {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
align-items: flex-start;
gap: var(--gap-md);
.chart-controls__buttons {

4
components/ui/report/ReportInfo.vue
View File

@@ -82,7 +82,7 @@
<span v-tooltip="$dayjs(report.created).format('MMMM D, YYYY [at] h:mm A')">{{
fromNow(report.created)
}}</span>
<CopyCode v-if="cosmetics.developerMode" :text="report.id" class="report-id" />
<CopyCode v-if="flags.developerMode" :text="report.id" class="report-id" />
</div>
</div>
</template>
@@ -124,7 +124,7 @@ defineProps({
},
})
const cosmetics = useCosmetics()
const flags = useFeatureFlags()
</script>
<style lang="scss" scoped>

4
components/ui/thread/ConversationThread.vue
View File

@@ -33,7 +33,7 @@
</div>
</div>
</Modal>
<div v-if="cosmetics.developerMode" class="thread-id">
<div v-if="flags.developerMode" class="thread-id">
Thread ID: <CopyCode :text="thread.id" />
</div>
<div v-if="sortedMessages.length > 0" class="messages universal-card recessed">
@@ -247,7 +247,7 @@ const props = defineProps({
const emit = defineEmits(['update-thread'])
const app = useNuxtApp()
const cosmetics = useCosmetics()
const flags = useFeatureFlags()
const members = computed(() => {
const members = {}

6
components/ui/thread/ThreadMessage.vue
View File

@@ -289,7 +289,7 @@ a:active + .message__author a,
.moderation-color,
role-moderator {
color: var(--color-special-orange);
color: var(--color-orange);
}
.role-admin {
@@ -297,11 +297,11 @@ role-moderator {
}
.reporter-icon {
color: var(--color-special-purple);
color: var(--color-purple);
}
.private-icon {
color: var(--color-special-gray);
color: var(--color-gray);
}
@media screen and (min-width: 600px) {