mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 15:34:13 +00:00 
			
		
		
		
	Tweak UI
This commit is contained in:
		
							parent
							
								
									faf2c007aa
								
							
						
					
					
						commit
						c0c64a2d5d
					
				
					 10 changed files with 46 additions and 13 deletions
				
			
		| 
						 | 
					@ -253,6 +253,7 @@
 | 
				
			||||||
		"vue-prism-editor": "2.0.0-alpha.2",
 | 
							"vue-prism-editor": "2.0.0-alpha.2",
 | 
				
			||||||
		"vue-router": "4.0.5",
 | 
							"vue-router": "4.0.5",
 | 
				
			||||||
		"vue-style-loader": "4.1.3",
 | 
							"vue-style-loader": "4.1.3",
 | 
				
			||||||
 | 
							"vue-svg-loader": "0.17.0-beta.2",
 | 
				
			||||||
		"vuedraggable": "4.0.1",
 | 
							"vuedraggable": "4.0.1",
 | 
				
			||||||
		"web-push": "3.4.4",
 | 
							"web-push": "3.4.4",
 | 
				
			||||||
		"webpack": "5.27.2",
 | 
							"webpack": "5.27.2",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -24,7 +24,7 @@ export default defineComponent({
 | 
				
			||||||
	--formXPadding: 32px;
 | 
						--formXPadding: 32px;
 | 
				
			||||||
	--formYPadding: 32px;
 | 
						--formYPadding: 32px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	line-height: 1.4em;
 | 
						line-height: 1.3em;
 | 
				
			||||||
	background: var(--bg);
 | 
						background: var(--bg);
 | 
				
			||||||
	padding: var(--formYPadding) var(--formXPadding);
 | 
						padding: var(--formYPadding) var(--formXPadding);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -215,7 +215,7 @@ export default defineComponent({
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .input {
 | 
						> .input {
 | 
				
			||||||
		$height: 52px;
 | 
							$height: 48px;
 | 
				
			||||||
		position: relative;
 | 
							position: relative;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		> input {
 | 
							> input {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -69,8 +69,8 @@ export default defineComponent({
 | 
				
			||||||
			display: inline-block;
 | 
								display: inline-block;
 | 
				
			||||||
			vertical-align: bottom;
 | 
								vertical-align: bottom;
 | 
				
			||||||
			position: relative;
 | 
								position: relative;
 | 
				
			||||||
			width: 20px;
 | 
								width: 16px;
 | 
				
			||||||
			height: 20px;
 | 
								height: 16px;
 | 
				
			||||||
			margin-right: 8px;
 | 
								margin-right: 8px;
 | 
				
			||||||
			background: none;
 | 
								background: none;
 | 
				
			||||||
			border: 2px solid var(--inputBorder);
 | 
								border: 2px solid var(--inputBorder);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -69,7 +69,7 @@ export default defineComponent({
 | 
				
			||||||
	position: relative;
 | 
						position: relative;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .main {
 | 
						> .main {
 | 
				
			||||||
		padding: 24px 16px;
 | 
							padding: 22px 16px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		> input {
 | 
							> input {
 | 
				
			||||||
			display: block;
 | 
								display: block;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -97,7 +97,7 @@ export default defineComponent({
 | 
				
			||||||
			font: inherit;
 | 
								font: inherit;
 | 
				
			||||||
			font-weight: normal;
 | 
								font-weight: normal;
 | 
				
			||||||
			font-size: 1em;
 | 
								font-size: 1em;
 | 
				
			||||||
			height: 52px;
 | 
								height: 48px;
 | 
				
			||||||
			background: none;
 | 
								background: none;
 | 
				
			||||||
			border: none;
 | 
								border: none;
 | 
				
			||||||
			border-radius: 0;
 | 
								border-radius: 0;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -57,7 +57,7 @@ export default defineComponent({
 | 
				
			||||||
	> .main {
 | 
						> .main {
 | 
				
			||||||
		position: relative;
 | 
							position: relative;
 | 
				
			||||||
		display: flex;
 | 
							display: flex;
 | 
				
			||||||
		padding: 16px;
 | 
							padding: 14px 16px;
 | 
				
			||||||
		cursor: pointer;
 | 
							cursor: pointer;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		> * {
 | 
							> * {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -30,6 +30,11 @@
 | 
				
			||||||
	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 | 
						<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 | 
				
			||||||
		<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
 | 
							<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
 | 
				
			||||||
	</MkA>
 | 
						</MkA>
 | 
				
			||||||
 | 
						<div class="divider"></div>
 | 
				
			||||||
 | 
						<div class="foo">
 | 
				
			||||||
 | 
							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
 | 
				
			||||||
 | 
						</div>
 | 
				
			||||||
 | 
						<!--<MisskeyLogo class="misskey"/>-->
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -44,10 +49,12 @@ import { sidebarDef } from '@client/sidebar';
 | 
				
			||||||
import { getAccounts, addAccount, login } from '@client/account';
 | 
					import { getAccounts, addAccount, login } from '@client/account';
 | 
				
			||||||
import MkButton from '@client/components/ui/button.vue';
 | 
					import MkButton from '@client/components/ui/button.vue';
 | 
				
			||||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
 | 
					import { StickySidebar } from '@client/scripts/sticky-sidebar';
 | 
				
			||||||
 | 
					import MisskeyLogo from '@/../assets/client/misskey.svg';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default defineComponent({
 | 
					export default defineComponent({
 | 
				
			||||||
	components: {
 | 
						components: {
 | 
				
			||||||
		MkButton
 | 
							MkButton,
 | 
				
			||||||
 | 
							MisskeyLogo,
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	data() {
 | 
						data() {
 | 
				
			||||||
| 
						 | 
					@ -315,6 +322,16 @@ export default defineComponent({
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						> .misskey {
 | 
				
			||||||
 | 
							fill: currentColor;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						> .foo {
 | 
				
			||||||
 | 
							text-align: center;
 | 
				
			||||||
 | 
							padding: 8px 0 16px 0;
 | 
				
			||||||
 | 
							opacity: 0.5;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .item {
 | 
						> .item {
 | 
				
			||||||
		position: relative;
 | 
							position: relative;
 | 
				
			||||||
		display: block;
 | 
							display: block;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -103,6 +103,12 @@ module.exports = {
 | 
				
			||||||
					esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
 | 
										esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
 | 
				
			||||||
				}
 | 
									}
 | 
				
			||||||
			}, postcss]
 | 
								}, postcss]
 | 
				
			||||||
 | 
							}, {
 | 
				
			||||||
 | 
								test: /\.svg$/,
 | 
				
			||||||
 | 
								use: [
 | 
				
			||||||
 | 
									'vue-loader',
 | 
				
			||||||
 | 
									'vue-svg-loader',
 | 
				
			||||||
 | 
								],
 | 
				
			||||||
		}, {
 | 
							}, {
 | 
				
			||||||
			test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
 | 
								test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
 | 
				
			||||||
			type: 'asset/resource'
 | 
								type: 'asset/resource'
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										19
									
								
								yarn.lock
									
										
									
									
									
								
							
							
						
						
									
										19
									
								
								yarn.lock
									
										
									
									
									
								
							| 
						 | 
					@ -6613,10 +6613,10 @@ methods@^1.1.2:
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 | 
					  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 | 
				
			||||||
  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 | 
					  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 | 
				
			||||||
 | 
					
 | 
				
			||||||
mfm-js@0.12.0:
 | 
					mfm-js@0.14.0:
 | 
				
			||||||
  version "0.12.0"
 | 
					  version "0.14.0"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.12.0.tgz#47be2fdb18869b9e55576fffcc159d0417c670db"
 | 
					  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9"
 | 
				
			||||||
  integrity sha512-u0IyIMwzsGsOGmctRXcOdWYsh9LWHKHqX+XCBfPjORX+1DCBdonaO6pryOawns6z16Xvus2yZk0KMMqWt2TotQ==
 | 
					  integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg==
 | 
				
			||||||
  dependencies:
 | 
					  dependencies:
 | 
				
			||||||
    twemoji-parser "13.0.x"
 | 
					    twemoji-parser "13.0.x"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -10050,7 +10050,7 @@ svgo@^0.7.0:
 | 
				
			||||||
    sax "~1.2.1"
 | 
					    sax "~1.2.1"
 | 
				
			||||||
    whet.extend "~0.9.9"
 | 
					    whet.extend "~0.9.9"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
svgo@^1.0.0:
 | 
					svgo@^1.0.0, svgo@^1.3.2:
 | 
				
			||||||
  version "1.3.2"
 | 
					  version "1.3.2"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
 | 
					  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
 | 
				
			||||||
  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
 | 
					  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
 | 
				
			||||||
| 
						 | 
					@ -10980,6 +10980,15 @@ vue-style-loader@4.1.3:
 | 
				
			||||||
    hash-sum "^1.0.2"
 | 
					    hash-sum "^1.0.2"
 | 
				
			||||||
    loader-utils "^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:
 | 
					vue@3.0.8:
 | 
				
			||||||
  version "3.0.8"
 | 
					  version "3.0.8"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
 | 
					  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue