From 1412f43ffc2d4eb9448967a6ad696f58fb7783dd Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 12 Apr 2021 23:13:58 +0900 Subject: [PATCH] Tweak UI --- package.json | 1 + src/client/components/form/base.vue | 2 +- src/client/components/form/input.vue | 2 +- src/client/components/form/radios.vue | 4 ++-- src/client/components/form/range.vue | 2 +- src/client/components/form/select.vue | 2 +- src/client/components/form/switch.vue | 2 +- src/client/ui/default.sidebar.vue | 19 ++++++++++++++++++- webpack.config.ts | 6 ++++++ yarn.lock | 19 ++++++++++++++----- 10 files changed, 46 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index aaa3a4376..91a6732d7 100644 --- a/package.json +++ b/package.json @@ -253,6 +253,7 @@ "vue-prism-editor": "2.0.0-alpha.2", "vue-router": "4.0.5", "vue-style-loader": "4.1.3", + "vue-svg-loader": "0.17.0-beta.2", "vuedraggable": "4.0.1", "web-push": "3.4.4", "webpack": "5.27.2", diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue index b2e429d6b..84438a5b3 100644 --- a/src/client/components/form/base.vue +++ b/src/client/components/form/base.vue @@ -24,7 +24,7 @@ export default defineComponent({ --formXPadding: 32px; --formYPadding: 32px; - line-height: 1.4em; + line-height: 1.3em; background: var(--bg); padding: var(--formYPadding) var(--formXPadding); diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue index f0aa6b053..c0fa3e716 100644 --- a/src/client/components/form/input.vue +++ b/src/client/components/form/input.vue @@ -215,7 +215,7 @@ export default defineComponent({ } > .input { - $height: 52px; + $height: 48px; position: relative; > input { diff --git a/src/client/components/form/radios.vue b/src/client/components/form/radios.vue index 4561df32e..3daa7e5bb 100644 --- a/src/client/components/form/radios.vue +++ b/src/client/components/form/radios.vue @@ -69,8 +69,8 @@ export default defineComponent({ display: inline-block; vertical-align: bottom; position: relative; - width: 20px; - height: 20px; + width: 16px; + height: 16px; margin-right: 8px; background: none; border: 2px solid var(--inputBorder); diff --git a/src/client/components/form/range.vue b/src/client/components/form/range.vue index 3452184c5..65d665c70 100644 --- a/src/client/components/form/range.vue +++ b/src/client/components/form/range.vue @@ -69,7 +69,7 @@ export default defineComponent({ position: relative; > .main { - padding: 24px 16px; + padding: 22px 16px; > input { display: block; diff --git a/src/client/components/form/select.vue b/src/client/components/form/select.vue index b865372f5..01f28587d 100644 --- a/src/client/components/form/select.vue +++ b/src/client/components/form/select.vue @@ -97,7 +97,7 @@ export default defineComponent({ font: inherit; font-weight: normal; font-size: 1em; - height: 52px; + height: 48px; background: none; border: none; border-radius: 0; diff --git a/src/client/components/form/switch.vue b/src/client/components/form/switch.vue index a2941c599..e7ef714c4 100644 --- a/src/client/components/form/switch.vue +++ b/src/client/components/form/switch.vue @@ -57,7 +57,7 @@ export default defineComponent({ > .main { position: relative; display: flex; - padding: 16px; + padding: 14px 16px; cursor: pointer; > * { diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue index 6323393f2..3e956679c 100644 --- a/src/client/ui/default.sidebar.vue +++ b/src/client/ui/default.sidebar.vue @@ -30,6 +30,11 @@ {{ $ts.settings }} +
+
+ +
+ @@ -44,10 +49,12 @@ import { sidebarDef } from '@client/sidebar'; import { getAccounts, addAccount, login } from '@client/account'; import MkButton from '@client/components/ui/button.vue'; import { StickySidebar } from '@client/scripts/sticky-sidebar'; +import MisskeyLogo from '@/../assets/client/misskey.svg'; export default defineComponent({ components: { - MkButton + MkButton, + MisskeyLogo, }, data() { @@ -315,6 +322,16 @@ export default defineComponent({ } } + > .misskey { + fill: currentColor; + } + + > .foo { + text-align: center; + padding: 8px 0 16px 0; + opacity: 0.5; + } + > .item { position: relative; display: block; diff --git a/webpack.config.ts b/webpack.config.ts index 5ead4f3af..9f2a3a89a 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -103,6 +103,12 @@ module.exports = { esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない } }, postcss] + }, { + test: /\.svg$/, + use: [ + 'vue-loader', + 'vue-svg-loader', + ], }, { test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/, type: 'asset/resource' diff --git a/yarn.lock b/yarn.lock index 5c27f8ce0..fb3c82ad9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6613,10 +6613,10 @@ methods@^1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= -mfm-js@0.12.0: - version "0.12.0" - resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.12.0.tgz#47be2fdb18869b9e55576fffcc159d0417c670db" - integrity sha512-u0IyIMwzsGsOGmctRXcOdWYsh9LWHKHqX+XCBfPjORX+1DCBdonaO6pryOawns6z16Xvus2yZk0KMMqWt2TotQ== +mfm-js@0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9" + integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg== dependencies: twemoji-parser "13.0.x" @@ -10050,7 +10050,7 @@ svgo@^0.7.0: sax "~1.2.1" whet.extend "~0.9.9" -svgo@^1.0.0: +svgo@^1.0.0, svgo@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw== @@ -10980,6 +10980,15 @@ vue-style-loader@4.1.3: hash-sum "^1.0.2" loader-utils "^1.0.2" +vue-svg-loader@0.17.0-beta.2: + version "0.17.0-beta.2" + resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7" + integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q== + dependencies: + loader-utils "^2.0.0" + semver "^7.3.2" + svgo "^1.3.2" + vue@3.0.8: version "3.0.8" resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"