Skip to content

Commit

Permalink
refactor: add size prop to DesignIcon
Browse files Browse the repository at this point in the history
  • Loading branch information
ludchieng committed Jan 24, 2023
1 parent 0c65306 commit 32c2fac
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 23 deletions.
11 changes: 5 additions & 6 deletions src/components/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
class="icon-line"
:to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
>
<LineIcon :lineSlugName="$route.params.line" color="colors" />
<LineIcon
:lineSlugName="$route.params.line"
color="colors"
size="md"
/>
</router-link>
</div>
<div>
Expand Down Expand Up @@ -76,11 +80,6 @@ header {
margin-left: 0.5rem;
}
.icon-line img {
width: 2rem;
height: 2rem;
}
.clock {
display: flex;
justify-content: end;
Expand Down
12 changes: 10 additions & 2 deletions src/components/AppNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
>
<router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
<span class="tab-label">
<LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
<LineIcon
:lineSlugName="line"
:color="tabIndex() === i ? 'dark' : 'light'"
size="sm"
/>
<span v-if="stop" class="tab-label-text">
{{ getStop(line, stop).displayName }}
</span>
Expand Down Expand Up @@ -38,7 +42,11 @@
>
<router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
<span class="tab-label">
<LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
<LineIcon
:lineSlugName="line"
:color="tabIndex() === i ? 'dark' : 'light'"
size="sm"
/>
<span v-if="stop" class="tab-label-text">
{{ getStop(line, stop).displayName }}
</span>
Expand Down
10 changes: 7 additions & 3 deletions src/components/LineIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@
v-if="lineSlugName"
:src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
:alt="`${lineSlugName}`"
:size="size"
/>
</template>

<script lang="ts">
import Vue from 'vue'
import DesignIcon from '@/components/design/DesignIcon.vue'
import Vue, { PropType } from 'vue'
import DesignIcon, { DesignIconSize } from '@/components/design/DesignIcon.vue'
export type LineIconColor = 'colors' | 'light' | 'dark'
export default Vue.extend({
name: 'LineIcon',
Expand All @@ -21,7 +24,8 @@ export default Vue.extend({
type: Boolean,
default: false,
},
color: String,
color: String as PropType<LineIconColor>,
size: String as PropType<DesignIconSize>,
},
})
</script>
Expand Down
10 changes: 7 additions & 3 deletions src/components/LineMap/LineMapLabelCell.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@
>
{{ stopName }}
<div class="line-connections">
<LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
:lineSlugName="conn.line" color="colors" fadeIn
<LineIcon
v-for="conn in lineConnections"
:key="`${conn.line}/${conn.slugName}`"
:lineSlugName="conn.line"
color="colors"
size="sm"
fadeIn
/>
</div>
</router-link>
Expand Down Expand Up @@ -51,6 +56,5 @@ export default Vue.extend({
.line-connections > img {
margin-top: 0.2rem;
margin-right: 0.2rem;
width: 1.35rem;
}
</style>
6 changes: 5 additions & 1 deletion src/components/Stop/StopHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
:key="`${conn.line}/${conn.slugName}`"
:to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
>
<LineIcon :lineSlugName="conn.line" color="dark" />
<LineIcon
:lineSlugName="conn.line"
color="dark"
size="md"
/>
</router-link>
</span>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/Timetables/TimetablesHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@
<router-link v-for="line in category.lines" :key="line.slugName"
class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
>
<LineIcon :lineSlugName="line.slugName" color="dark" fadeIn />
<LineIcon
:lineSlugName="line.slugName"
color="dark"
size="lg"
fadeIn
/>
</router-link>
</div>
</div>
Expand Down Expand Up @@ -50,9 +55,4 @@ hr {
display: inline-block;
margin: 1rem 1rem 0 0;
}
.icon-line img {
width: 3.5rem;
height: 3.5rem;
}
</style>
27 changes: 25 additions & 2 deletions src/components/design/DesignIcon.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
<template>
<img
:class="{ 'fade-in': fadeIn }"
:class="{
'size-sm': size === 'sm',
'size-md': size === 'md',
'size-lg': size === 'lg',
'fade-in': fadeIn,
}"
:src="src"
:alt="alt"
/>
</template>

<script lang="ts">
import Vue from 'vue'
import Vue, { PropType } from 'vue'
export type DesignIconSize = 'sm' | 'md' | 'lg'
export default Vue.extend({
name: 'DesignIcon',
props: {
src: String,
alt: String,
size: String as PropType<DesignIconSize>,
fadeIn: {
type: Boolean,
default: false,
Expand All @@ -23,6 +31,21 @@ export default Vue.extend({
</script>

<style scoped>
.size-sm {
width: 1.35rem;
height: 1.35rem;
}
.size-md {
width: 2rem;
height: 2rem;
}
.size-lg {
width: 3.5rem;
height: 3.5rem;
}
.fade-in {
opacity: 1;
animation: fadeIn 600ms ease;
Expand Down

0 comments on commit 32c2fac

Please sign in to comment.