From 1412f43ffc2d4eb9448967a6ad696f58fb7783dd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
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 @@
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
</MkA>
+ <div class="divider"></div>
+ <div class="foo">
+ <MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+ </div>
+ <!--<MisskeyLogo class="misskey"/>-->
</div>
</template>
@@ -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"