Skip to content

Commit c58cf33

Browse files
sebinsidesebinside
committed
Merge branches 'micha-1', 'micha-2', 'micha-3', 'micha-4', 'micha-5', 'micha-6', 'micha-7', 'micha-8' and 'micha-9'
9 parents e7a4a0c + 1b98576 + 8d5f051 + 21cd674 + d862ce3 + 91f1053 + b02955a + eb7e694 + 63dadaf commit c58cf33

8 files changed

Lines changed: 70 additions & 80 deletions

File tree

‎StreamAwesome/src/components/browser/IconBrowser.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,11 @@ function selectIcon(icon: FontAwesomeIconType) {
1717
}
1818
1919
function iconTypetoFontAwesomeIcon(iconType: FontAwesomeIconType): FontAwesomeIcon {
20-
const id = iconType.id
21-
const label = iconType.label
22-
const unicode = iconType.unicode
20+
const { id, label, unicode } = iconType
2321
const isBrandsIcon = iconType.isBrand()
2422
2523
// Icons have some previously selected properties, selecting an icon does not change this
26-
const style = iconStore.currentIcon.fontAwesomeIcon.style
27-
const family = iconStore.currentIcon.fontAwesomeIcon.family
28-
const duotoneAlpha = iconStore.currentIcon.fontAwesomeIcon.duotoneAlpha
24+
const { style, family, duotoneAlpha } = iconStore.currentIcon.fontAwesomeIcon
2925
3026
return { id, label, unicode, isBrandsIcon, style, family, duotoneAlpha }
3127
}

‎StreamAwesome/src/components/settings/GeneralOptions.vue‎

Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
32
import {
43
BrandsKeyword,
54
DuotoneKeyword,
@@ -13,14 +12,12 @@ import {
1312
import { FontAwesomeIconType } from '@/model/fontAwesomeIconType'
1413
import Icon from '@/components/utils/IconDisplay.vue'
1514
import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
16-
import { ref } from 'vue'
1715
import { fontAwesomeVersionInfo } from '@/model/fontAwesomeInfo'
16+
import { useIconsStore } from '@/stores/icons.ts'
17+
import { storeToRefs } from 'pinia'
1818
19-
const props = defineProps<{
20-
icon: CustomIcon<FontAwesomePreset>
21-
}>()
22-
23-
const currentIcon = ref(props.icon ?? ({} as CustomIcon<FontAwesomePreset>))
19+
const iconStore = useIconsStore()
20+
const { currentIcon } = storeToRefs(iconStore)
2421
2522
const relevantFamilies =
2623
fontAwesomeVersionInfo.fontLicense === 'Pro' ? FontAwesomeFamilyKeys : FontAwesomeFreeFamilyKeys
@@ -30,7 +27,7 @@ const relevantStyles =
3027
: FontAwesomeFreeStyleKeys
3128
3229
function createFontAwesomeIconDisplayFromStyle(style: FontAwesomeStyle): FontAwesomeIcon {
33-
if (props.icon === undefined) {
30+
if (currentIcon.value === undefined) {
3431
const fallBackIcon = FontAwesomeIconType.createFallBackIcon()
3532
return {
3633
id: fallBackIcon.id,
@@ -41,19 +38,15 @@ function createFontAwesomeIconDisplayFromStyle(style: FontAwesomeStyle): FontAwe
4138
duotoneAlpha: 0.5,
4239
style: style
4340
}
44-
} else {
45-
const id = props.icon.fontAwesomeIcon.id
46-
const label = props.icon.fontAwesomeIcon.label
47-
const unicode = props.icon.fontAwesomeIcon.unicode
48-
const isBrandsIcon = props.icon.fontAwesomeIcon.isBrandsIcon
49-
const family = props.icon.fontAwesomeIcon.family
50-
const duotoneAlpha = props.icon.fontAwesomeIcon.duotoneAlpha
51-
return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
5241
}
42+
43+
const { id, label, unicode, isBrandsIcon, family, duotoneAlpha } =
44+
currentIcon.value.fontAwesomeIcon
45+
return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
5346
}
5447
5548
function createFontAwesomeIconDisplayFromFamily(family: FontAwesomeFamily): FontAwesomeIcon {
56-
if (props.icon === undefined) {
49+
if (currentIcon.value === undefined) {
5750
const fallBackIcon = FontAwesomeIconType.createFallBackIcon()
5851
return {
5952
id: fallBackIcon.id,
@@ -64,15 +57,11 @@ function createFontAwesomeIconDisplayFromFamily(family: FontAwesomeFamily): Font
6457
duotoneAlpha: 0.5,
6558
style: fallBackIcon.styles.free[0]!.style
6659
}
67-
} else {
68-
const id = props.icon.fontAwesomeIcon.id
69-
const label = props.icon.fontAwesomeIcon.label
70-
const unicode = props.icon.fontAwesomeIcon.unicode
71-
const isBrandsIcon = props.icon.fontAwesomeIcon.isBrandsIcon
72-
const style = props.icon.fontAwesomeIcon.style
73-
const duotoneAlpha = props.icon.fontAwesomeIcon.duotoneAlpha
74-
return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
7560
}
61+
62+
const { id, label, unicode, isBrandsIcon, style, duotoneAlpha } =
63+
currentIcon.value.fontAwesomeIcon
64+
return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
7665
}
7766
7867
function updateSize(event: Event) {
@@ -102,15 +91,15 @@ function updateAlpha(event: Event) {
10291
<input
10392
id="iconSize"
10493
type="range"
105-
:value="props.icon?.fontSize ?? 180"
94+
:value="currentIcon.fontSize ?? 180"
10695
@input="(event) => updateSize(event)"
10796
min="50"
10897
max="250"
10998
class="mb-6 h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
11099
/>
111100
</div>
112101

113-
<div v-if="props.icon.fontAwesomeIcon.family.includes(DuotoneKeyword)">
102+
<div v-if="currentIcon.fontAwesomeIcon.family.includes(DuotoneKeyword)">
114103
<label
115104
for="duotoneAlpha"
116105
class="mb-[0.5] block text-sm font-medium text-gray-900 dark:text-white"
@@ -119,7 +108,7 @@ function updateAlpha(event: Event) {
119108
<input
120109
id="duotoneAlpha"
121110
type="range"
122-
:value="props.icon?.fontAwesomeIcon.duotoneAlpha ?? 0.5"
111+
:value="currentIcon.fontAwesomeIcon.duotoneAlpha ?? 0.5"
123112
@input="(event) => updateAlpha(event)"
124113
min="0"
125114
max="1"
@@ -139,7 +128,7 @@ function updateAlpha(event: Event) {
139128
:value="family"
140129
class="peer hidden"
141130
@input="() => updateFamily(family)"
142-
:checked="family === props.icon?.fontAwesomeIcon.family"
131+
:checked="family === currentIcon.fontAwesomeIcon.family"
143132
/>
144133
<label
145134
:for="family"
@@ -155,7 +144,7 @@ function updateAlpha(event: Event) {
155144
</div>
156145
</div>
157146

158-
<div v-if="!icon.fontAwesomeIcon.family.includes(DuotoneKeyword)">
147+
<div v-if="!currentIcon.fontAwesomeIcon.family.includes(DuotoneKeyword)">
159148
<label class="mt-3 block text-sm font-medium text-gray-900 dark:text-white"
160149
>Font Style:
161150
</label>
@@ -168,7 +157,7 @@ function updateAlpha(event: Event) {
168157
:value="style"
169158
class="peer hidden"
170159
@input="() => updateStyle(style)"
171-
:checked="style === props.icon?.fontAwesomeIcon.style"
160+
:checked="style === currentIcon.fontAwesomeIcon.style"
172161
/>
173162
<label
174163
:for="style"

‎StreamAwesome/src/components/settings/IconSettings.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const iconStore = useIconsStore()
88
</script>
99

1010
<template>
11-
<PresetOptions :icon="iconStore.currentIcon" />
11+
<PresetOptions />
1212

13-
<GeneralOptions :icon="iconStore.currentIcon" />
13+
<GeneralOptions />
1414

1515
<DownloadButton />
1616
</template>

‎StreamAwesome/src/components/settings/PresetOptions.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script setup lang="ts">
2-
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
32
import ClassicPreset from '@/components/settings/presets/ClassicPreset.vue'
43
import ModernPreset from '@/components/settings/presets/ModernPreset.vue'
54
import NeoPreset from '@/components/settings/presets/NeoPreset.vue'
65
import CustomPreset from '@/components/settings/presets/CustomPreset.vue'
76
import { ref, computed } from 'vue'
87
import type { VNode, Component } from 'vue'
8+
import { useIconsStore } from '@/stores/icons.ts'
9+
import { storeToRefs } from 'pinia'
910
10-
const props = defineProps<{
11-
icon: CustomIcon<FontAwesomePreset>
12-
}>()
11+
const iconStore = useIconsStore()
12+
const { currentIcon } = storeToRefs(iconStore)
1313
1414
const presets = {
1515
Classic: ClassicPreset,
@@ -21,10 +21,8 @@ const presets = {
2121
const presetKeys = Object.keys(presets) as IconPreset[]
2222
type IconPreset = keyof typeof presets
2323
24-
const selectedPreset = ref<IconPreset>(props.icon.presetSettings.preset)
25-
const selectedPresetComponent = computed(() => {
26-
return presets[selectedPreset.value]
27-
})
24+
const selectedPreset = ref(currentIcon.value.presetSettings.preset)
25+
const selectedPresetComponent = computed(() => presets[selectedPreset.value])
2826
</script>
2927

3028
<template>
@@ -42,6 +40,6 @@ const selectedPresetComponent = computed(() => {
4240
</option>
4341
</select>
4442

45-
<component :is="selectedPresetComponent" :icon="icon" />
43+
<component :is="selectedPresetComponent" :icon="currentIcon" />
4644
</div>
4745
</template>

‎StreamAwesome/src/components/settings/presets/ClassicPreset.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
32
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
3+
import { useIconsStore } from '@/stores/icons.ts'
4+
import { storeToRefs } from 'pinia'
5+
import { computed } from 'vue'
46
5-
const props = defineProps<{
7+
defineProps<{
68
icon: CustomIcon<FontAwesomePreset>
79
}>()
810
9-
const currentIcon = ref(props.icon ?? ({} as CustomIcon<FontAwesomePreset>))
11+
const iconStore = useIconsStore()
12+
const { currentIcon } = storeToRefs(iconStore)
13+
1014
if (currentIcon.value.presetSettings.preset !== 'Classic') {
1115
applyDefaultSettings()
1216
}
@@ -20,7 +24,7 @@ function applyDefaultSettings() {
2024
currentIcon.value.fontAwesomeIcon.family = 'classic'
2125
}
2226
23-
const currentHue = ref((currentIcon.value as CustomIcon<'Classic'>).presetSettings.hue)
27+
const currentHue = computed(() => (currentIcon.value as CustomIcon<'Classic'>).presetSettings.hue)
2428
</script>
2529

2630
<template>
@@ -34,7 +38,6 @@ const currentHue = ref((currentIcon.value as CustomIcon<'Classic'>).presetSettin
3438
min="0"
3539
class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
3640
v-model.number="(currentIcon as CustomIcon<'Classic'>).presetSettings.hue"
37-
@input="currentHue = (currentIcon as CustomIcon<'Classic'>).presetSettings.hue"
3841
/>
3942
</template>
4043

‎StreamAwesome/src/components/settings/presets/CustomPreset.vue‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
32
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
3+
import { useIconsStore } from '@/stores/icons.ts'
4+
import { storeToRefs } from 'pinia'
45
5-
const props = defineProps<{
6+
defineProps<{
67
icon: CustomIcon<FontAwesomePreset>
78
}>()
89
9-
const currentIcon = ref(props.icon ?? ({} as CustomIcon<FontAwesomePreset>))
10+
const iconStore = useIconsStore()
11+
const { currentIcon } = storeToRefs(iconStore)
12+
1013
if (currentIcon.value.presetSettings.preset !== 'Custom') {
1114
applyDefaultSettings()
1215
}
@@ -26,7 +29,6 @@ function applyDefaultSettings() {
2629
<label class="inline-flex cursor-pointer items-center">
2730
<input
2831
type="color"
29-
class="cursor-pointer"
3032
v-model="(currentIcon as CustomIcon<'Custom'>).presetSettings.foregroundColor"
3133
/>
3234
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Icon Color</span>
@@ -35,34 +37,30 @@ function applyDefaultSettings() {
3537
<label class="mt-2 inline-flex cursor-pointer items-center">
3638
<input
3739
type="color"
38-
class="cursor-pointer"
3940
v-model="(currentIcon as CustomIcon<'Custom'>).presetSettings.backgroundColor"
4041
/>
4142
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Background Color</span>
4243
</label>
4344
</template>
4445

4546
<style scoped>
46-
input[type='color'] {
47+
input {
4748
border: none;
49+
border-radius: 5px;
4850
padding: 0;
4951
width: 2rem;
5052
height: 2rem;
51-
-webkit-appearance: none;
53+
cursor: pointer;
54+
overflow: hidden;
5255
appearance: none;
53-
}
54-
55-
input[type='color']::-webkit-color-swatch-wrapper {
56-
padding: 0;
57-
}
56+
-webkit-appearance: none;
5857
59-
input[type='color']::-webkit-color-swatch {
60-
border: none;
61-
}
58+
&::-webkit-color-swatch-wrapper {
59+
padding: 0;
60+
}
6261
63-
input[type='color'] {
64-
cursor: pointer;
65-
border-radius: 5px;
66-
overflow: hidden;
62+
&::-webkit-color-swatch {
63+
border: none;
64+
}
6765
}
6866
</style>

‎StreamAwesome/src/components/settings/presets/ModernPreset.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
32
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
3+
import { useIconsStore } from '@/stores/icons.ts'
4+
import { storeToRefs } from 'pinia'
45
5-
const props = defineProps<{
6+
defineProps<{
67
icon: CustomIcon<FontAwesomePreset>
78
}>()
89
9-
const currentIcon = ref(props.icon ?? ({} as CustomIcon<FontAwesomePreset>))
10+
const iconStore = useIconsStore()
11+
const { currentIcon } = storeToRefs(iconStore)
12+
1013
if (currentIcon.value.presetSettings.preset !== 'Modern') {
1114
applyDefaultSettings()
1215
}

‎StreamAwesome/src/components/settings/presets/NeoPreset.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
2+
import { ref, computed } from 'vue'
33
import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
44
import { ColorSpaceKeys } from '@/model/customIcon'
5+
import { useIconsStore } from '@/stores/icons.ts'
6+
import { storeToRefs } from 'pinia'
57
6-
const props = defineProps<{
8+
defineProps<{
79
icon: CustomIcon<FontAwesomePreset>
810
}>()
911
10-
const currentIcon = ref(props.icon ?? ({} as CustomIcon<FontAwesomePreset>))
12+
const iconStore = useIconsStore()
13+
const { currentIcon } = storeToRefs(iconStore)
14+
1115
if (currentIcon.value.presetSettings.preset !== 'Neo') {
1216
applyDefaultSettings()
1317
}
@@ -28,7 +32,7 @@ function applyDefaultSettings() {
2832
currentIcon.value.fontAwesomeIcon.family = 'classic'
2933
}
3034
31-
const currentHue = ref((currentIcon.value as CustomIcon<'Neo'>).presetSettings.hueStart)
35+
const currentHue = computed(() => (currentIcon.value as CustomIcon<'Neo'>).presetSettings.hueStart)
3236
3337
const settingsExpanded = ref(false)
3438
const toggleSettings = () => {
@@ -47,7 +51,6 @@ const toggleSettings = () => {
4751
max="360"
4852
class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
4953
v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
50-
@input="currentHue = (currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
5154
/>
5255

5356
<label class="mt-3 inline-flex cursor-pointer items-center">

0 commit comments

Comments
 (0)