From ee3dc50914fb007cff9d7033341103a1bb663c29 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sun, 9 Feb 2020 21:56:21 +0100 Subject: [PATCH] Create icon library --- resources/components/departures.html | 2 +- .../components/departures/departure.html | 13 +- resources/components/favourites.html | 6 +- resources/components/favourites/save.html | 2 +- resources/components/finder.html | 8 +- resources/components/line.html | 6 +- resources/components/messages.html | 4 +- resources/components/picker/stop.html | 4 +- resources/components/stop/details.html | 4 +- resources/components/ui/icon.html | 4 + resources/ts/app.ts | 8 +- resources/ts/components/messages.ts | 6 +- resources/ts/components/ui/icon.ts | 127 ++++++++++++++++++ resources/ts/components/ui/index.ts | 1 + resources/ts/components/ui/switch.ts | 2 +- resources/ts/font-awesome.ts | 16 --- templates/app.html.twig | 36 ++--- templates/choose.html.twig | 4 +- webpack.config.js | 3 +- 19 files changed, 182 insertions(+), 74 deletions(-) create mode 100644 resources/components/ui/icon.html create mode 100644 resources/ts/components/ui/icon.ts delete mode 100644 resources/ts/font-awesome.ts diff --git a/resources/components/departures.html b/resources/components/departures.html index d8f3557..e2f02b8 100644 --- a/resources/components/departures.html +++ b/resources/components/departures.html @@ -3,7 +3,7 @@
- + Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html index cef5126..06b56d8 100644 --- a/resources/components/departures/departure.html +++ b/resources/components/departures/departure.html @@ -6,11 +6,10 @@
- + {{ departure.scheduled.format('HH:mm') }} @@ -24,13 +23,13 @@
- +
@@ -38,7 +37,7 @@
- +
diff --git a/resources/components/favourites.html b/resources/components/favourites.html index 0e49f25..2e4ce30 100644 --- a/resources/components/favourites.html +++ b/resources/components/favourites.html @@ -3,7 +3,7 @@
    • - + Brak zapisanych zespołów przystanków
    diff --git a/resources/components/favourites/save.html b/resources/components/favourites/save.html index f65d937..3f223e3 100644 --- a/resources/components/favourites/save.html +++ b/resources/components/favourites/save.html @@ -6,7 +6,7 @@ :class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name" v-model="name" v-autofocus/>

    {{ error }}

    diff --git a/resources/components/finder.html b/resources/components/finder.html index 6a7d452..7f34e33 100644 --- a/resources/components/finder.html +++ b/resources/components/finder.html @@ -6,7 +6,7 @@
    - +
    @@ -16,7 +16,7 @@
    @@ -26,7 +26,7 @@ @@ -35,7 +35,7 @@
    - + Nie znaleziono więcej przystanków, spełniających te kryteria.
    diff --git a/resources/components/line.html b/resources/components/line.html index 91f1ef2..517545c 100644 --- a/resources/components/line.html +++ b/resources/components/line.html @@ -2,14 +2,14 @@ - + - + {{ line.symbol }} - + diff --git a/resources/components/messages.html b/resources/components/messages.html index e1af51a..d6cda3b 100644 --- a/resources/components/messages.html +++ b/resources/components/messages.html @@ -1,6 +1,6 @@ \ No newline at end of file + diff --git a/resources/components/picker/stop.html b/resources/components/picker/stop.html index 1fa2830..1f42643 100644 --- a/resources/components/picker/stop.html +++ b/resources/components/picker/stop.html @@ -21,11 +21,11 @@ diff --git a/resources/components/stop/details.html b/resources/components/stop/details.html index e25f061..e8d0927 100644 --- a/resources/components/stop/details.html +++ b/resources/components/stop/details.html @@ -32,5 +32,5 @@
    - -
    \ No newline at end of file + + diff --git a/resources/components/ui/icon.html b/resources/components/ui/icon.html new file mode 100644 index 0000000..4fd3d67 --- /dev/null +++ b/resources/components/ui/icon.html @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ts/app.ts b/resources/ts/app.ts index 24d2987..c5cbef0 100644 --- a/resources/ts/app.ts +++ b/resources/ts/app.ts @@ -6,10 +6,6 @@ import "leaflet/dist/leaflet.css"; import Popper from 'popper.js'; import * as $ from "jquery"; - -window['$'] = window['jQuery'] = $; -window['Popper'] = Popper; - // dependencies import Vue from "vue"; import Vuex from 'vuex'; @@ -21,6 +17,9 @@ import { Workbox } from "workbox-window"; import { migrate } from "./store/migrations"; import { Component } from "vue-property-decorator"; +window['$'] = window['jQuery'] = $; +window['Popper'] = Popper; + Vue.use(Vuex); Vue.use(PortalVue); Vue.use(VueDragscroll); @@ -43,7 +42,6 @@ Component.registerHooks(['removed']); const [ components, { default: store } ] = await Promise.all([ import('./components'), import('./store'), - import('./font-awesome'), import('./filters'), import('bootstrap'), ] as const); diff --git a/resources/ts/components/messages.ts b/resources/ts/components/messages.ts index e3b2d89..50b8140 100644 --- a/resources/ts/components/messages.ts +++ b/resources/ts/components/messages.ts @@ -1,7 +1,6 @@ import Vue from 'vue'; import { Component } from "vue-property-decorator"; import { Message } from "../model/message"; -import { faInfoCircle, faExclamationTriangle, faQuestionCircle } from "@fortawesome/pro-light-svg-icons"; import { namespace } from 'vuex-class'; import store from '../store' @@ -13,9 +12,6 @@ export class MessagesComponent extends Vue { public icon(message: Message) { switch (message.type) { - case "breakdown": return faExclamationTriangle; - case "info": return faInfoCircle; - case "unknown": return faQuestionCircle; } } @@ -28,4 +24,4 @@ export class MessagesComponent extends Vue { } } -Vue.component('Messages', MessagesComponent); \ No newline at end of file +Vue.component('Messages', MessagesComponent); diff --git a/resources/ts/components/ui/icon.ts b/resources/ts/components/ui/icon.ts new file mode 100644 index 0000000..0fe37c1 --- /dev/null +++ b/resources/ts/components/ui/icon.ts @@ -0,0 +1,127 @@ +import Vue from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import { IconDefinition, library } from "@fortawesome/fontawesome-svg-core" +import { Dictionary } from "../../utils"; +import { + faBullhorn, + faCheck, + faCheckDouble, + faChevronCircleUp, + faChevronDown, + faChevronUp, + faClock, + faCog, + faExclamationTriangle, + faInfoCircle, + faMapMarkerAlt, + faMoon, + faQuestionCircle, + faSearch, + faSign, + faStar, + faSync, + faTimes, + faTrashAlt +} from "@fortawesome/pro-light-svg-icons"; +import { faClock as faClockBold, faCodeCommit, faSpinnerThird } from "@fortawesome/pro-regular-svg-icons"; +import { faExclamationTriangle as faSolidExclamationTriangle, faWalking } from "@fortawesome/pro-solid-svg-icons"; +import { fac } from "../../icons"; +import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from "@fortawesome/vue-fontawesome"; + +type IconDescription = { icon: IconDefinition, [prop: string]: any } + +type SimpleIcon = { + type: 'simple', +} & IconDescription; + +type StackedIcon = { + type: 'stacked', + icons: IconDescription[], +} + +export type Icon = SimpleIcon | StackedIcon; + +const simple = (icon: IconDefinition, props: any = {}): SimpleIcon => ({ + icon, ...props, type: "simple" +}); + +const stack = (icons: IconDescription[]): StackedIcon => ({type: "stacked", icons}); + +const lineTypeIcons = Object + .values(fac) + .map<[string, Icon]>(icon => [ `line-${icon.iconName}`, simple(icon) ]) + .reduce((acc, [icon, definition]) => ({ ...acc, [icon]: definition}), {}) + +const messageTypeIcons: Dictionary = { + 'message-breakdown': simple(faExclamationTriangle), + 'message-info': simple(faInfoCircle), + 'message-unknown': simple(faQuestionCircle), +}; + +const definitions: Dictionary = { + 'favourite': simple(faStar), + 'add': simple(faCheck), + 'add-all': simple(faCheckDouble), + 'remove-stop': simple(faTimes), + 'delete': simple(faTrashAlt), + 'messages': simple(faBullhorn), + 'timetable': simple(faClock), + 'settings': simple(faCog), + 'refresh': simple(faSync), + 'chevron-down': simple(faChevronDown), + 'chevron-up': simple(faChevronUp), + 'search': simple(faSearch), + 'info': simple(faInfoCircle), + 'warning': simple(faExclamationTriangle), + 'night': simple(faMoon), + 'fast': simple(faWalking), + 'track': simple(faCodeCommit), + 'info-hide': simple(faChevronCircleUp), + 'map': simple(faMapMarkerAlt), + 'stop': simple(faSign), + 'spinner': simple(faSpinnerThird, { spin: true }), + 'departure-warning': stack([ + {icon: faClockBold}, + {icon: faSolidExclamationTriangle, transform: "shrink-5 down-4 right-6"} + ]), + ...lineTypeIcons, + ...messageTypeIcons, +}; + +const extractAllIcons = (icons: Icon[]) => icons.map(icon => { + switch (icon.type) { + case "simple": + return [icon.icon]; + case "stacked": + return icon.icons.map(stacked => stacked.icon); + } +}).reduce((acc, cur) => [...acc, ...cur]); + +library.add(...extractAllIcons(Object.values(definitions))); + +@Component({ + template: require('../../../components/ui/icon.html'), + components: { + fa: FontAwesomeIcon, + faLayers: FontAwesomeLayers, + faText: FontAwesomeLayersText, + } +}) +export class UiIcon extends Vue { + @Prop({ + type: [ String, Object ], + validator: value => typeof value === "object" || Object.keys(definitions).includes(value), + required: true, + }) + icon: keyof typeof definitions; + + get definition() { + return {...(typeof this.icon === "string" ? definitions[this.icon] : { icon: this.icon }), ...this.$attrs}; + } + + get type() { + return definitions[this.icon].type; + } +} + +Vue.component('UiIcon', UiIcon); diff --git a/resources/ts/components/ui/index.ts b/resources/ts/components/ui/index.ts index 4dd2256..9647ef5 100644 --- a/resources/ts/components/ui/index.ts +++ b/resources/ts/components/ui/index.ts @@ -1 +1,2 @@ export * from './switch'; +export * from './icon'; diff --git a/resources/ts/components/ui/switch.ts b/resources/ts/components/ui/switch.ts index 46756a3..d8a6dce 100644 --- a/resources/ts/components/ui/switch.ts +++ b/resources/ts/components/ui/switch.ts @@ -3,7 +3,7 @@ import { Component, Prop } from 'vue-property-decorator' import * as uuid from "uuid"; @Component({ - template: require('@templates/ui/switch.html'), + template: require('../../../components/ui/switch.html'), inheritAttrs: false }) export class UiSwitch extends Vue { diff --git a/resources/ts/font-awesome.ts b/resources/ts/font-awesome.ts deleted file mode 100644 index 184cfd6..0000000 --- a/resources/ts/font-awesome.ts +++ /dev/null @@ -1,16 +0,0 @@ -import Vue from 'vue' - -import { library } from '@fortawesome/fontawesome-svg-core' - -import { far } from "@fortawesome/pro-regular-svg-icons"; -import { fas } from "@fortawesome/pro-solid-svg-icons"; -import { fal } from "@fortawesome/pro-light-svg-icons"; -import { fac } from "./icons"; - -import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' - -library.add(far, fas, fal, fac); - -Vue.component('fa', FontAwesomeIcon); -Vue.component('fa-layers', FontAwesomeLayers); -Vue.component('fa-text', FontAwesomeLayersText); diff --git a/templates/app.html.twig b/templates/app.html.twig index 327f004..fb49b83 100644 --- a/templates/app.html.twig +++ b/templates/app.html.twig @@ -8,30 +8,30 @@

    - + Komunikaty {{ '{{ messages.count }}' }}

    @@ -59,23 +59,23 @@

    - + Odjazdy

    @@ -98,7 +98,7 @@ {% if provider.attribution %}
    - + Pochodzenie danych: {{ provider.attribution|raw }}
    {% endif %} @@ -108,12 +108,12 @@

    - + Przystanki

    @@ -123,7 +123,7 @@ @@ -132,7 +132,7 @@
    @@ -145,22 +145,22 @@
    diff --git a/templates/choose.html.twig b/templates/choose.html.twig index 8d4a044..397e154 100644 --- a/templates/choose.html.twig +++ b/templates/choose.html.twig @@ -2,7 +2,7 @@ {% block body %}
    - + Wybierz źródło danych
      @@ -14,4 +14,4 @@ {% endfor %}
    -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/webpack.config.js b/webpack.config.js index 2b357ce..367d75b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,8 +20,7 @@ const config = { extensions: ['.tsx', '.ts', '.js'], alias: { 'vue$': 'vue/dist/vue.esm.js', - 'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified', - '@templates': path.resolve(__dirname, './resources/components/'), + 'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified' } }, module: {