From d88d44ecb06645bb77f2b8cf04bbf26467d61ed1 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Wed, 8 Jun 2022 11:59:09 +0200 Subject: [PATCH] Refactor icons as Web Components --- client/index.html | 1 + .../components/circle/LearningSequence.vue | 7 +- client/src/components/icons/IconArrowDown.vue | 7 -- client/src/components/icons/IconArrowLeft.vue | 7 -- .../src/components/icons/IconArrowRight.vue | 7 -- client/src/components/icons/IconArrowUp.vue | 7 -- client/src/components/icons/IconCheck.vue | 7 -- .../components/icons/IconCheckboxChecked.vue | 7 -- .../icons/IconCheckboxUnchecked.vue | 5 - client/src/components/icons/IconClose.vue | 7 -- client/src/components/icons/IconLsApply.vue | 7 -- client/src/components/icons/IconLsEnd.vue | 10 -- client/src/components/icons/IconLsNetwork.vue | 14 --- .../src/components/icons/IconLsPractice.vue | 7 -- client/src/components/icons/IconLsTest.vue | 7 -- client/src/components/icons/IconLsWatch.vue | 7 -- client/src/components/icons/IconMessage.vue | 7 -- .../src/components/icons/IconSmileyHappy.vue | 14 --- .../components/icons/IconSmileyNeutral.vue | 13 --- .../components/icons/IconSmileyThinking.vue | 21 ---- client/src/main.ts | 17 --- client/src/views/StyelGuideView.vue | 103 ++++++++---------- client/vite.config.ts | 18 ++- server/vbv_lernwelt/learnpath/urls.py | 8 +- server/vbv_lernwelt/learnpath/views.py | 27 +++++ .../templates/simpletodo/index.html | 5 + .../static/icons/icon-arrow-down.svg | 5 + .../static/icons/icon-arrow-left.svg | 5 + .../static/icons/icon-arrow-right.svg | 5 + .../static/icons/icon-arrow-up.svg | 5 + .../vbv_lernwelt/static/icons/icon-check.svg | 5 + .../static/icons/icon-checkbox-checked.svg | 5 + .../static/icons/icon-checkbox-unchecked.svg | 3 + .../vbv_lernwelt/static/icons/icon-close.svg | 5 + .../vbv_lernwelt/static/icons/icon-info.svg | 7 +- .../static/icons/icon-ls-apply.svg | 5 + .../vbv_lernwelt/static/icons/icon-ls-end.svg | 8 ++ .../static/icons/icon-ls-network.svg | 12 ++ .../static/icons/icon-ls-practice.svg | 5 + .../static/icons/icon-ls-start.svg | 8 +- .../static/icons/icon-ls-test.svg | 5 + .../static/icons/icon-ls-watch.svg | 5 + .../static/icons/icon-message.svg | 5 + .../static/icons/icon-smiley-happy.svg | 12 ++ .../static/icons/icon-smiley-neutral.svg | 11 ++ .../static/icons/icon-smiley-thinking.svg | 18 +++ server/vbv_lernwelt/templates/base.html | 2 + .../vbv_lernwelt/templates/learnpath/icons.js | 29 +++++ 48 files changed, 254 insertions(+), 263 deletions(-) delete mode 100644 client/src/components/icons/IconArrowDown.vue delete mode 100644 client/src/components/icons/IconArrowLeft.vue delete mode 100644 client/src/components/icons/IconArrowRight.vue delete mode 100644 client/src/components/icons/IconArrowUp.vue delete mode 100644 client/src/components/icons/IconCheck.vue delete mode 100644 client/src/components/icons/IconCheckboxChecked.vue delete mode 100644 client/src/components/icons/IconCheckboxUnchecked.vue delete mode 100644 client/src/components/icons/IconClose.vue delete mode 100644 client/src/components/icons/IconLsApply.vue delete mode 100644 client/src/components/icons/IconLsEnd.vue delete mode 100644 client/src/components/icons/IconLsNetwork.vue delete mode 100644 client/src/components/icons/IconLsPractice.vue delete mode 100644 client/src/components/icons/IconLsTest.vue delete mode 100644 client/src/components/icons/IconLsWatch.vue delete mode 100644 client/src/components/icons/IconMessage.vue delete mode 100644 client/src/components/icons/IconSmileyHappy.vue delete mode 100644 client/src/components/icons/IconSmileyNeutral.vue delete mode 100644 client/src/components/icons/IconSmileyThinking.vue create mode 100644 server/vbv_lernwelt/static/icons/icon-arrow-down.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-arrow-left.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-arrow-right.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-arrow-up.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-check.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-checkbox-checked.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-checkbox-unchecked.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-close.svg rename client/src/components/icons/IconInfo.vue => server/vbv_lernwelt/static/icons/icon-info.svg (71%) create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-apply.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-end.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-network.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-practice.svg rename client/src/components/icons/IconLsStart.vue => server/vbv_lernwelt/static/icons/icon-ls-start.svg (70%) create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-test.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-ls-watch.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-message.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-smiley-happy.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-smiley-neutral.svg create mode 100644 server/vbv_lernwelt/static/icons/icon-smiley-thinking.svg create mode 100644 server/vbv_lernwelt/templates/learnpath/icons.js diff --git a/client/index.html b/client/index.html index 11f9aef5..31fdea1c 100644 --- a/client/index.html +++ b/client/index.html @@ -7,6 +7,7 @@ + myVBV diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue index e1af43eb..3dd68457 100644 --- a/client/src/components/circle/LearningSequence.vue +++ b/client/src/components/circle/LearningSequence.vue @@ -1,8 +1,5 @@ @@ -31,8 +28,8 @@ defineProps(['learningSequence']) v-for="learningUnit in learningPackage.learningUnits" class="flex items-center gap-4 pb-3" > - - + +
{{ learningUnit.contents[0].type }}: {{ learningUnit.title }}
diff --git a/client/src/components/icons/IconArrowDown.vue b/client/src/components/icons/IconArrowDown.vue deleted file mode 100644 index 96f7b2d0..00000000 --- a/client/src/components/icons/IconArrowDown.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconArrowLeft.vue b/client/src/components/icons/IconArrowLeft.vue deleted file mode 100644 index eee84291..00000000 --- a/client/src/components/icons/IconArrowLeft.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconArrowRight.vue b/client/src/components/icons/IconArrowRight.vue deleted file mode 100644 index 907d78b1..00000000 --- a/client/src/components/icons/IconArrowRight.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconArrowUp.vue b/client/src/components/icons/IconArrowUp.vue deleted file mode 100644 index 1c9cc238..00000000 --- a/client/src/components/icons/IconArrowUp.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconCheck.vue b/client/src/components/icons/IconCheck.vue deleted file mode 100644 index db492cd1..00000000 --- a/client/src/components/icons/IconCheck.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconCheckboxChecked.vue b/client/src/components/icons/IconCheckboxChecked.vue deleted file mode 100644 index 79718f51..00000000 --- a/client/src/components/icons/IconCheckboxChecked.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconCheckboxUnchecked.vue b/client/src/components/icons/IconCheckboxUnchecked.vue deleted file mode 100644 index 0d84821c..00000000 --- a/client/src/components/icons/IconCheckboxUnchecked.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/client/src/components/icons/IconClose.vue b/client/src/components/icons/IconClose.vue deleted file mode 100644 index bd32921e..00000000 --- a/client/src/components/icons/IconClose.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconLsApply.vue b/client/src/components/icons/IconLsApply.vue deleted file mode 100644 index 3c2dae05..00000000 --- a/client/src/components/icons/IconLsApply.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconLsEnd.vue b/client/src/components/icons/IconLsEnd.vue deleted file mode 100644 index 00aa08ce..00000000 --- a/client/src/components/icons/IconLsEnd.vue +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/client/src/components/icons/IconLsNetwork.vue b/client/src/components/icons/IconLsNetwork.vue deleted file mode 100644 index bcfb5d35..00000000 --- a/client/src/components/icons/IconLsNetwork.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/client/src/components/icons/IconLsPractice.vue b/client/src/components/icons/IconLsPractice.vue deleted file mode 100644 index 940f9e26..00000000 --- a/client/src/components/icons/IconLsPractice.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconLsTest.vue b/client/src/components/icons/IconLsTest.vue deleted file mode 100644 index 050448d0..00000000 --- a/client/src/components/icons/IconLsTest.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconLsWatch.vue b/client/src/components/icons/IconLsWatch.vue deleted file mode 100644 index e2e3bb75..00000000 --- a/client/src/components/icons/IconLsWatch.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconMessage.vue b/client/src/components/icons/IconMessage.vue deleted file mode 100644 index 5bd94641..00000000 --- a/client/src/components/icons/IconMessage.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/client/src/components/icons/IconSmileyHappy.vue b/client/src/components/icons/IconSmileyHappy.vue deleted file mode 100644 index 5d6829bb..00000000 --- a/client/src/components/icons/IconSmileyHappy.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/client/src/components/icons/IconSmileyNeutral.vue b/client/src/components/icons/IconSmileyNeutral.vue deleted file mode 100644 index c48f93c2..00000000 --- a/client/src/components/icons/IconSmileyNeutral.vue +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/client/src/components/icons/IconSmileyThinking.vue b/client/src/components/icons/IconSmileyThinking.vue deleted file mode 100644 index 990bef88..00000000 --- a/client/src/components/icons/IconSmileyThinking.vue +++ /dev/null @@ -1,21 +0,0 @@ - diff --git a/client/src/main.ts b/client/src/main.ts index 3707db7e..b0b3f535 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -5,14 +5,6 @@ import {setupI18n} from './i18n' import App from './App.vue' import router from './router' -import IconLsApply from '@/components/icons/IconLsApply.vue'; -import IconLsWatch from '@/components/icons/IconLsWatch.vue'; -import IconLsTest from '@/components/icons/IconLsTest.vue'; -import IconLsPractice from '@/components/icons/IconLsPractice.vue'; -import IconLsNetwork from '@/components/icons/IconLsNetwork.vue'; -import IconLsStart from '@/components/icons/IconLsStart.vue'; -import IconLsEnd from '@/components/icons/IconLsEnd.vue'; - import '@/assets/styles/index.scss' const i18n = setupI18n() @@ -26,12 +18,3 @@ app.use(router) app.use(i18n) app.mount('#app') - -// register icons globally -app.component('IconLsApply', IconLsApply) -app.component('IconLsWatch', IconLsWatch) -app.component('IconLsTest', IconLsTest) -app.component('IconLsPractice', IconLsPractice) -app.component('IconLsNetwork', IconLsNetwork) -app.component('IconLsStart', IconLsStart) -app.component('IconLsEnd', IconLsEnd) diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue index 204fb30c..44ccd7ed 100644 --- a/client/src/views/StyelGuideView.vue +++ b/client/src/views/StyelGuideView.vue @@ -1,26 +1,6 @@ + {% block javascript %} diff --git a/server/vbv_lernwelt/templates/learnpath/icons.js b/server/vbv_lernwelt/templates/learnpath/icons.js new file mode 100644 index 00000000..f03cc06b --- /dev/null +++ b/server/vbv_lernwelt/templates/learnpath/icons.js @@ -0,0 +1,29 @@ +/* +create custom element classes from svg files +example: + +class icon_arrow_up extends HTMLElement { + connectedCallback() { + this.innerHTML = ` + + +`; + } +} + +customElements.define('it-icon-arrow-up', icon_arrow_up); +*/ + + +{% for svg_icon in svg_files %} + +class {{ svg_icon.classname }} extends HTMLElement { + connectedCallback() { + this.innerHTML = `{{ svg_icon.content|safe }}`; + } +} + +customElements.define('{{ svg_icon.elementname }}', {{ svg_icon.classname }}); + +{% endfor %}