Skip to content

Commit

Permalink
refactor: add DesignIcon
Browse files Browse the repository at this point in the history
  • Loading branch information
ludchieng committed Jan 24, 2023
1 parent 9dc2d58 commit 0c65306
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 23 deletions.
2 changes: 1 addition & 1 deletion src/components/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
class="icon-line"
:to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
>
<LineIcon :lineSlugName="$route.params.line" theme="colors" />
<LineIcon :lineSlugName="$route.params.line" color="colors" />
</router-link>
</div>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
>
<router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
<span class="tab-label">
<LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
<LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
<span v-if="stop" class="tab-label-text">
{{ getStop(line, stop).displayName }}
</span>
Expand Down Expand Up @@ -38,7 +38,7 @@
>
<router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
<span class="tab-label">
<LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
<LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
<span v-if="stop" class="tab-label-text">
{{ getStop(line, stop).displayName }}
</span>
Expand Down
25 changes: 8 additions & 17 deletions src/components/LineIcon.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,30 @@
<template>
<img
<DesignIcon
v-if="lineSlugName"
:src="`/img/lines-icons/${theme}/${lineSlugName}.svg`"
:class="{ 'fade-in': fadeIn }"
:src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
:alt="`${lineSlugName}`"
/>
</template>

<script lang="ts">
import Vue from 'vue'
import DesignIcon from '@/components/design/DesignIcon.vue'
export default Vue.extend({
name: 'LineIcon',
components: {
DesignIcon,
},
props: {
lineSlugName: String,
fadeIn: {
type: Boolean,
default: false,
},
theme: String,
color: String,
},
})
</script>

<style scoped>
.fade-in {
opacity: 1;
animation: fadeIn 600ms ease;
}
@keyframes fadeIn {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
2 changes: 1 addition & 1 deletion src/components/LineMap/LineMapLabelCell.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{{ stopName }}
<div class="line-connections">
<LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
:lineSlugName="conn.line" theme="colors" fadeIn
:lineSlugName="conn.line" color="colors" fadeIn
/>
</div>
</router-link>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Stop/StopHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:key="`${conn.line}/${conn.slugName}`"
:to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
>
<LineIcon :lineSlugName="conn.line" theme="dark" />
<LineIcon :lineSlugName="conn.line" color="dark" />
</router-link>
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Timetables/TimetablesHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<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" theme="dark" fadeIn />
<LineIcon :lineSlugName="line.slugName" color="dark" fadeIn />
</router-link>
</div>
</div>
Expand Down
39 changes: 39 additions & 0 deletions src/components/design/DesignIcon.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<img
:class="{ 'fade-in': fadeIn }"
:src="src"
:alt="alt"
/>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'DesignIcon',
props: {
src: String,
alt: String,
fadeIn: {
type: Boolean,
default: false,
},
},
})
</script>

<style scoped>
.fade-in {
opacity: 1;
animation: fadeIn 600ms ease;
}
@keyframes fadeIn {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>

0 comments on commit 0c65306

Please sign in to comment.