Skip to content

Commit 40151a7

Browse files
ebkrebkr
committed
Added request new game action. Refactored CSS out of Manager.vue.
1 parent f0da60c commit 40151a7

4 files changed

Lines changed: 108 additions & 92 deletions

File tree

‎src/components/navigation/EcosystemUpdateIndicator.vue‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
<template>
22
<Teleport to="#activity-bar">
3-
<button
4-
v-if="status.onClick"
5-
type="button"
6-
:class="['activity-bar__action', 'status-indicator', { 'status-indicator--error-action': status.isError }]"
7-
:title="status.tooltip"
8-
@click="status.onClick"
9-
>
10-
<i :class="status.iconClass"></i>
11-
<span class="status-indicator__text">{{ status.text }}</span>
12-
</button>
13-
<div
14-
v-else
15-
:class="['status-indicator', { 'status-indicator--error': status.isError }]"
16-
>
17-
<i :class="status.iconClass"></i>
18-
<span class="status-indicator__text">{{ status.text }}</span>
3+
<div class="activity-bar--left">
4+
<button class="activity-bar__action" @click="requestNewGame">
5+
<span class="icon is-small"><i class="fa fa-plus fa-xs"></i></span>
6+
<span>Request a new game</span>
7+
</button>
8+
</div>
9+
<div class="activity-bar--right">
10+
<button
11+
v-if="status.onClick"
12+
type="button"
13+
:class="['activity-bar__action', 'status-indicator', { 'status-indicator--error-action': status.isError }]"
14+
:title="status.tooltip"
15+
@click="status.onClick"
16+
>
17+
<i :class="status.iconClass"></i>
18+
<span class="status-indicator__text">{{ status.text }}</span>
19+
</button>
20+
<div
21+
v-else
22+
:class="['status-indicator', { 'status-indicator--error': status.isError }]"
23+
>
24+
<i :class="status.iconClass"></i>
25+
<span class="status-indicator__text">{{ status.text }}</span>
26+
</div>
1927
</div>
2028
</Teleport>
2129
</template>
@@ -24,6 +32,7 @@
2432
import { computed } from 'vue';
2533
import { getStore } from '../../providers/generic/store/StoreProvider';
2634
import { State } from '../../store';
35+
import LinkProvider from '../../providers/components/LinkProvider';
2736
2837
const store = getStore<State>();
2938
@@ -61,6 +70,10 @@ const status = computed(() => {
6170
tooltip: undefined,
6271
};
6372
});
73+
74+
function requestNewGame() {
75+
LinkProvider.instance.openLink("https://wiki.thunderstore.io/ecosystem/adding-a-new-game");
76+
}
6477
</script>
6578

6679
<style lang="scss" scoped>
@@ -85,7 +98,6 @@ const status = computed(() => {
8598
}
8699
87100
.status-indicator--error-action {
88-
margin-left: auto;
89101
color: var(--ecosystem-update-error-text, #a3162f);
90102
background: var(--ecosystem-update-error-background, #fbe4e7);
91103
border: 1px solid var(--ecosystem-update-error-border, #efc2ca);
@@ -96,4 +108,8 @@ const status = computed(() => {
96108
border-color: var(--ecosystem-update-error-border, #efc2ca);
97109
color: var(--ecosystem-update-error-text, #a3162f);
98110
}
111+
112+
.spacer {
113+
flex: 1;
114+
}
99115
</style>

‎src/css/v2/components/_activity-bar.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.activity-bar--left {
2+
flex: 1;
3+
display: flex;
4+
flex-direction: row;
5+
align-items: center;
6+
gap: 0.375rem;
7+
}
8+
9+
.activity-bar__group {
10+
display: flex;
11+
align-items: center;
12+
gap: 0.125rem;
13+
}
14+
15+
.activity-bar__context-item,
16+
.activity-bar__action {
17+
.icon {
18+
height: auto;
19+
}
20+
}
21+
22+
.activity-bar__context-item {
23+
display: inline-flex;
24+
align-items: center;
25+
gap: 0.375rem;
26+
padding: 0.4rem 0.5rem;
27+
border-radius: 4px;
28+
font-size: 0.875rem;
29+
cursor: pointer;
30+
background: none;
31+
border: none;
32+
color: var(--text, #4a4a4a);
33+
line-height: 1.5;
34+
white-space: nowrap;
35+
36+
&:hover {
37+
background-color: var(--menu-item-hover-background-color, #e9eaed);
38+
color: var(--menu-item-hover-color, #363636);
39+
}
40+
}
41+
42+
.activity-bar__action {
43+
display: inline-flex;
44+
align-items: center;
45+
gap: 0.375rem;
46+
padding: 0.4rem 0.5rem;
47+
border-radius: 4px;
48+
font-size: 0.875rem;
49+
cursor: pointer;
50+
background: none;
51+
border: 1px solid var(--border, #e1e1e1);
52+
color: var(--text, #4a4a4a);
53+
line-height: 1.5;
54+
white-space: nowrap;
55+
56+
&:hover {
57+
background-color: var(--menu-item-hover-background-color, #e9eaed);
58+
border-color: var(--border-hover, #b5b5b5);
59+
color: var(--menu-item-hover-color, #363636);
60+
}
61+
}
62+
63+
.activity-bar__item-label {
64+
font-size: 0.7rem;
65+
font-weight: 600;
66+
text-transform: uppercase;
67+
letter-spacing: 0.04em;
68+
opacity: 0.5;
69+
line-height: 1;
70+
}
71+
72+
.activity-bar__item-divider {
73+
padding: 0 0.2rem;
74+
}

‎src/css/v2/components/_all.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
1212
@use "code";
1313
@use "panel";
1414
@use "hr";
15+
@use "activity-bar";

‎src/pages/Manager.vue‎

Lines changed: 0 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -531,81 +531,6 @@ onMounted(async () => {
531531
width: 100%;
532532
}
533533
534-
.activity-bar--left {
535-
flex: 1;
536-
display: flex;
537-
flex-direction: row;
538-
align-items: center;
539-
gap: 0.375rem;
540-
}
541-
542-
.activity-bar__group {
543-
display: flex;
544-
align-items: center;
545-
gap: 0.125rem;
546-
}
547-
548-
.activity-bar__context-item,
549-
.activity-bar__action {
550-
.icon {
551-
height: auto;
552-
}
553-
}
554-
555-
.activity-bar__context-item {
556-
display: inline-flex;
557-
align-items: center;
558-
gap: 0.375rem;
559-
padding: 0.4rem 0.5rem;
560-
border-radius: 4px;
561-
font-size: 0.875rem;
562-
cursor: pointer;
563-
background: none;
564-
border: none;
565-
color: var(--text, #4a4a4a);
566-
line-height: 1.5;
567-
white-space: nowrap;
568-
569-
&:hover {
570-
background-color: var(--menu-item-hover-background-color, #e9eaed);
571-
color: var(--menu-item-hover-color, #363636);
572-
}
573-
}
574-
575-
.activity-bar__action {
576-
display: inline-flex;
577-
align-items: center;
578-
gap: 0.375rem;
579-
padding: 0.4rem 0.5rem;
580-
border-radius: 4px;
581-
font-size: 0.875rem;
582-
cursor: pointer;
583-
background: none;
584-
border: 1px solid var(--border, #e1e1e1);
585-
color: var(--text, #4a4a4a);
586-
line-height: 1.5;
587-
white-space: nowrap;
588-
589-
&:hover {
590-
background-color: var(--menu-item-hover-background-color, #e9eaed);
591-
border-color: var(--border-hover, #b5b5b5);
592-
color: var(--menu-item-hover-color, #363636);
593-
}
594-
}
595-
596-
.activity-bar__item-label {
597-
font-size: 0.7rem;
598-
font-weight: 600;
599-
text-transform: uppercase;
600-
letter-spacing: 0.04em;
601-
opacity: 0.5;
602-
line-height: 1;
603-
}
604-
605-
.activity-bar__item-divider {
606-
padding: 0 0.2rem;
607-
}
608-
609534
.game-icon {
610535
height: 1.125rem;
611536
border-radius: 2px;

0 commit comments

Comments
 (0)