🎨

src/client/app/common/views/components/visibility-chooser.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="mk-visibility-chooser">
+<div class="gqyayizv">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
-	<div class="popover" :class="{ compact }" ref="popover">
+	<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
 		<div @click="choose('public')" :class="{ active: v == 'public' }">
 			<div><fa icon="globe"/></div>
 			<div>
@@ -59,7 +59,7 @@ import * as anime from 'animejs';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/visibility-chooser.vue'),
-	props: ['source', 'compact'],
+	props: ['source'],
 	data() {
 		return {
 			v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility
@@ -76,7 +76,7 @@ export default Vue.extend({
 			let left;
 			let top;
 
-			if (this.compact) {
+			if (this.$root.isMobile) {
 				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
 				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
 				left = (x - (width / 2));
@@ -142,9 +142,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-$border-color = rgba(27, 31, 35, 0.15)
-
-.mk-visibility-chooser
+.gqyayizv
 	position initial
 
 	> .backdrop
@@ -170,33 +168,22 @@ $border-color = rgba(27, 31, 35, 0.15)
 		transform scale(0.5)
 		opacity 0
 
-		$balloon-size = 10px
+		&:not(.isMobile)
+			$arrow-size = 10px
 
-		&:not(.compact)
-			margin-top $balloon-size
-			transform-origin center -($balloon-size)
+			margin-top $arrow-size
+			transform-origin center -($arrow-size)
 
 			&:before
 				content ""
 				display block
 				position absolute
-				top -($balloon-size * 2)
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size $border-color
-
-			&:after
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2) + 1.5px
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size $bgcolor
+				top -($arrow-size * 2)
+				left s('calc(50% - %s)', $arrow-size)
+				border-top solid $arrow-size transparent
+				border-left solid $arrow-size transparent
+				border-right solid $arrow-size transparent
+				border-bottom solid $arrow-size $bgcolor
 
 		> div
 			display flex
@@ -235,4 +222,5 @@ $border-color = rgba(27, 31, 35, 0.15)
 
 				> span:last-child:not(:first-child)
 					opacity 0.6
+
 </style>