From 5ae576bad1cec2c7430864422260784503bd33e9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 26 Jan 2019 20:59:14 +0900
Subject: [PATCH] :art:

---
 .../choose-file-from-drive-window.vue         | 189 +++++++-----------
 .../choose-folder-from-drive-window.vue       | 104 +++-------
 2 files changed, 92 insertions(+), 201 deletions(-)

diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 8aa7fe167..7c69f3aa7 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -1,21 +1,23 @@
 <template>
 <mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
-	<span slot="header">
-		<span :class="$style.title">{{ $t('choose-prompt') }}</span>
-		<span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
+	<span slot="header" class="jqiaciqv">
+		<span class="title">{{ $t('choose-prompt') }}</span>
+		<span class="count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
 	</span>
 
-	<x-drive
-		ref="browser"
-		:class="$style.browser"
-		:multiple="multiple"
-		@selected="onSelected"
-		@change-selection="onChangeSelection"
-	/>
-	<div :class="$style.footer">
-		<button :class="$style.upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
-		<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
-		<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</button>
+	<div class="rqsvbumu">
+		<x-drive
+			ref="browser"
+			class="browser"
+			:multiple="multiple"
+			@selected="onSelected"
+			@change-selection="onChangeSelection"
+		/>
+		<div class="footer">
+			<button class="upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
+			<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
+			<ui-button inline primary :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</ui-button>
+		</div>
 	</div>
 </mk-window>
 </template>
@@ -60,120 +62,67 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
-.title
-	> [data-icon]
-		margin-right 4px
+<style lang="stylus" scoped>
+.jqiaciqv
+	.title
+		> [data-icon]
+			margin-right 4px
 
-.count
-	margin-left 8px
-	opacity 0.7
-
-.browser
-	height calc(100% - 72px)
-
-.footer
-	height 72px
-	background var(--primaryLighten95)
-
-.upload
-	display inline-block
-	position absolute
-	top 8px
-	left 16px
-	cursor pointer
-	padding 0
-	margin 8px 4px 0 0
-	width 40px
-	height 40px
-	font-size 1em
-	color var(--primaryAlpha05)
-	background transparent
-	outline none
-	border solid 1px transparent
-	border-radius 4px
-
-	&:hover
-		background transparent
-		border-color var(--primaryAlpha03)
-
-	&:active
-		color var(--primaryAlpha06)
-		background transparent
-		border-color var(--primaryAlpha05)
-		//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-.ok
-.cancel
-	display block
-	position absolute
-	bottom 16px
-	cursor pointer
-	padding 0
-	margin 0
-	width 120px
-	height 40px
-	font-size 1em
-	outline none
-	border-radius 4px
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-	&:disabled
+	.count
+		margin-left 8px
 		opacity 0.7
-		cursor default
 
-.ok
-	right 16px
-	color var(--primaryForeground)
-	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px var(--primaryLighten15)
+.rqsvbumu
+	display flex
+	flex-direction column
+	height 100%
 
-	&:not(:disabled)
-		font-weight bold
+	.browser
+		flex 1
+		overflow auto
 
-	&:hover:not(:disabled)
-		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color var(--primary)
+	.footer
+		padding 16px
+		background var(--desktopPostFormBg)
+		text-align right
 
-	&:active:not(:disabled)
-		background var(--primary)
-		border-color var(--primary)
+	.upload
+		display inline-block
+		position absolute
+		top 8px
+		left 16px
+		cursor pointer
+		padding 0
+		margin 8px 4px 0 0
+		width 40px
+		height 40px
+		font-size 1em
+		color var(--primaryAlpha05)
+		background transparent
+		outline none
+		border solid 1px transparent
+		border-radius 4px
 
-.cancel
-	right 148px
-	color #888
-	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-	border solid 1px #e2e2e2
+		&:hover
+			background transparent
+			border-color var(--primaryAlpha03)
 
-	&:hover
-		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-		border-color #dcdcdc
+		&:active
+			color var(--primaryAlpha06)
+			background transparent
+			border-color var(--primaryAlpha05)
+			//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 
-	&:active
-		background #ececec
-		border-color #dcdcdc
+		&:focus
+			&:after
+				content ""
+				pointer-events none
+				position absolute
+				top -5px
+				right -5px
+				bottom -5px
+				left -5px
+				border 2px solid var(--primaryAlpha03)
+				border-radius 8px
 
 </style>
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index e5ea7bea1..8633b86e4 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -1,17 +1,19 @@
 <template>
 <mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
 	<span slot="header">
-		<span :class="$style.title">{{ $t('choose-prompt') }}</span>
+		<span>{{ $t('choose-prompt') }}</span>
 	</span>
 
-	<x-drive
-		ref="browser"
-		:class="$style.browser"
-		:multiple="false"
-	/>
-	<div :class="$style.footer">
-		<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
-		<button :class="$style.ok" @click="ok">{{ $t('ok') }}</button>
+	<div class="hllkpxxu">
+		<x-drive
+			ref="browser"
+			class="browser"
+			:multiple="false"
+		/>
+		<div class="footer">
+			<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
+			<ui-button inline @click="ok" primary>{{ $t('ok') }}</ui-button>
+		</div>
 	</div>
 </mk-window>
 </template>
@@ -36,79 +38,19 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
+.hllkpxxu
+	display flex
+	flex-direction column
+	height 100%
 
+	.browser
+		flex 1
+		overflow auto
 
-.title
-	> [data-icon]
-		margin-right 4px
-
-.browser
-	height calc(100% - 72px)
-
-.footer
-	height 72px
-	background var(--primaryLighten95)
-
-.ok
-.cancel
-	display block
-	position absolute
-	bottom 16px
-	cursor pointer
-	padding 0
-	margin 0
-	width 120px
-	height 40px
-	font-size 1em
-	outline none
-	border-radius 4px
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-	&:disabled
-		opacity 0.7
-		cursor default
-
-.ok
-	right 16px
-	color var(--primaryForeground)
-	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px var(--primaryLighten15)
-
-	&:not(:disabled)
-		font-weight bold
-
-	&:hover:not(:disabled)
-		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color var(--primary)
-
-	&:active:not(:disabled)
-		background var(--primary)
-		border-color var(--primary)
-
-.cancel
-	right 148px
-	color #888
-	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-	border solid 1px #e2e2e2
-
-	&:hover
-		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-		border-color #dcdcdc
-
-	&:active
-		background #ececec
-		border-color #dcdcdc
+	.footer
+		padding 16px
+		background var(--desktopPostFormBg)
+		text-align right
 
 </style>