From 7a8c157ae3059096c087d18e50457186ca9f365d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 1 Apr 2021 08:49:04 +0200 Subject: [PATCH 001/221] Fix vue material icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- package.json | 2 +- src/assets/material-icons.css | 10 ++++++++++ webpack.common.js | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/assets/material-icons.css diff --git a/package.json b/package.json index 8a49c7ec09..c2304bd61c 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "v-tooltip": "^2.0.3", "vue": "^2.6.11", "vue-color": "^2.7.1", + "vue-material-design-icons": "^4.11.0", "vue-multiselect": "^2.1.6", "vue-visible": "^1.0.2", "vue2-datepicker": "^3.6.3" @@ -115,7 +116,6 @@ "vue-eslint-parser": "^7.1.0", "vue-jest": "^3.0.5", "vue-loader": "^15.9.1", - "vue-material-design-icons": "^4.11.0", "vue-styleguidist": "^4.33.9", "vue-template-compiler": "^2.6.11", "webpack": "^4.42.1", diff --git a/src/assets/material-icons.css b/src/assets/material-icons.css new file mode 100644 index 0000000000..26df1f7f37 --- /dev/null +++ b/src/assets/material-icons.css @@ -0,0 +1,10 @@ +/* +* Ensure proper alignment of the vue material icons +*/ +.material-design-icon { + display: flex; + align-self: center; + justify-self: center; + align-items: center; + justify-content: center; +} diff --git a/webpack.common.js b/webpack.common.js index 997047257a..21f1ba3421 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -112,7 +112,7 @@ module.exports = { { loader: 'sass-loader', options: { - additionalData: `$scope_version:${SCOPE_VERSION}; @import 'variables';`, + additionalData: `$scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`, /** * ! needed for resolve-url-loader */ From bd983aec3a67f00504cb2ee3c392cb775f3cb077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 1 Apr 2021 10:25:08 +0200 Subject: [PATCH 002/221] Migrate iconsfont to Material design icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- src/components/ActionButton/ActionButton.vue | 4 +- src/components/ActionInput/ActionInput.vue | 16 +- .../ActionTextEditable/ActionTextEditable.vue | 19 ++- src/components/Actions/Actions.vue | 52 +++--- .../AppNavigationIconCollapsible.vue | 12 +- .../AppNavigationItem/InputConfirmCancel.vue | 143 +++++++++++------ .../AppNavigationToggle.vue | 27 ++-- src/components/Avatar/Avatar.vue | 30 ++-- src/components/Breadcrumb/Breadcrumb.vue | 3 - src/components/ColorPicker/ColorPicker.vue | 95 +++++++---- src/components/Content/Content.vue | 47 ++++-- src/components/Modal/Modal.vue | 148 +++++++++--------- .../SettingsSection/SettingsSection.vue | 18 +-- 13 files changed, 362 insertions(+), 252 deletions(-) diff --git a/src/components/ActionButton/ActionButton.vue b/src/components/ActionButton/ActionButton.vue index c877b6d4aa..c2fb96b7df 100644 --- a/src/components/ActionButton/ActionButton.vue +++ b/src/components/ActionButton/ActionButton.vue @@ -49,7 +49,7 @@ You can also use a custom icon, for example from the vue-material-design-icons l Raise left hand @@ -57,7 +57,7 @@ You can also use a custom icon, for example from the vue-material-design-icons l Raise right hand diff --git a/src/components/ActionInput/ActionInput.vue b/src/components/ActionInput/ActionInput.vue index 48c74d25c6..6e7ec8d064 100644 --- a/src/components/ActionInput/ActionInput.vue +++ b/src/components/ActionInput/ActionInput.vue @@ -89,7 +89,9 @@ For the multiselect component, all events will be passed through. Please see the @change="onChange"> -