🎨

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 slot="header" class="jqiaciqv">
-		<span :class="$style.title">{{ $t('choose-prompt') }}</span>
+		<span class="title">{{ $t('choose-prompt') }}</span>
-		<span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
+		<span class="count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
 	</span>
 
+	<div class="rqsvbumu">
 		<x-drive
 			ref="browser"
-		:class="$style.browser"
+			class="browser"
 			:multiple="multiple"
 			@selected="onSelected"
 			@change-selection="onChangeSelection"
 		/>
-	<div :class="$style.footer">
+		<div class="footer">
-		<button :class="$style.upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
+			<button class="upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
-		<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
+			<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
-		<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</button>
+			<ui-button inline primary :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</ui-button>
+		</div>
 	</div>
 </mk-window>
 </template>
@@ -60,23 +62,31 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
-.title
+.jqiaciqv
+	.title
 		> [data-icon]
 			margin-right 4px
 
-.count
+	.count
 		margin-left 8px
 		opacity 0.7
 
-.browser
+.rqsvbumu
-	height calc(100% - 72px)
+	display flex
+	flex-direction column
+	height 100%
 
-.footer
+	.browser
-	height 72px
+		flex 1
-	background var(--primaryLighten95)
+		overflow auto
 
-.upload
+	.footer
+		padding 16px
+		background var(--desktopPostFormBg)
+		text-align right
+
+	.upload
 		display inline-block
 		position absolute
 		top 8px
@@ -115,65 +125,4 @@ export default Vue.extend({
 				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
-		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
-
 </style>

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>
 
+	<div class="hllkpxxu">
 		<x-drive
 			ref="browser"
-		:class="$style.browser"
+			class="browser"
 			:multiple="false"
 		/>
-	<div :class="$style.footer">
+		<div class="footer">
-		<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
+			<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
-		<button :class="$style.ok" @click="ok">{{ $t('ok') }}</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
+	.footer
-	> [data-icon]
+		padding 16px
-		margin-right 4px
+		background var(--desktopPostFormBg)
-
+		text-align right
-.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
 
 </style>