Merge branch 'develop' into sw-notification-action

src/client/ui/chat/date-separated-list.vue

@@ -1,17 +1,23 @@
 <script lang="ts">
-import { defineComponent, h, TransitionGroup } from 'vue';
+import { defineComponent, h, PropType, TransitionGroup } from 'vue';
+import MkAd from '@client/components/global/ad.vue';
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array,
+			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
 			required: true,
 		},
 		reversed: {
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		ad: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	methods: {
@@ -66,7 +72,15 @@ export default defineComponent({
 
 				return [el, separator];
 			} else {
-				return el;
+				if (this.ad && item._shouldInsertAd_) {
+					return [h(MkAd, {
+						class: 'a', // advertiseの意(ブロッカー対策)
+						key: item.id + ':ad',
+						prefer: ['horizontal', 'horizontal-big'],
+					}), el];
+				} else {
+					return el;
+				}
 			}
 		}));
 	},

src/client/ui/chat/index.vue

@@ -55,6 +55,7 @@
 					<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
 				</div>
 			</div>
+			<MkAd class="a" prefer="square"/>
 		</div>
 		<footer class="footer">
 			<div class="left">
@@ -64,7 +65,7 @@
 			</div>
 			<div class="right">
 				<button class="_button item search" @click="search" v-tooltip="$ts.search">
-					<i class="fas fa-search"></i>
+					<i class="fas fa-search icon"></i>
 				</button>
 				<MkA class="item" to="/settings" v-tooltip="$ts.settings"><i class="fas fa-cog icon"></i></MkA>
 			</div>
@@ -351,7 +352,7 @@ export default defineComponent({
 		flex-direction: column;
 		width: 250px;
 		height: 100vh;
-		border-right: solid 0.5px var(--divider);
+		border-right: solid 4px var(--divider);
 
 		> .header, > .footer {
 			$padding: 8px;
@@ -373,7 +374,7 @@ export default defineComponent({
 
 			> .left, > .right {
 				> .item, > .menu {
-					display: inline-block;
+					display: inline-flex;
 					vertical-align: middle;
 					height: ($header-height - ($padding * 2));
 					width: ($header-height - ($padding * 2));
@@ -387,11 +388,6 @@ export default defineComponent({
 					}
 
 					> .icon {
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
 						margin: auto;
 					}
 
@@ -503,6 +499,10 @@ export default defineComponent({
 					}
 				}
 			}
+
+			> .a {
+				margin: 12px;
+			}
 		}
 	}
 
@@ -596,7 +596,7 @@ export default defineComponent({
 
 	> .side {
 		width: 350px;
-		border-left: solid 0.5px var(--divider);
+		border-left: solid 4px var(--divider);
 
 		&.widgets.sideViewOpening {
 			@media (max-width: 1400px) {

src/client/ui/chat/notes.vue

@@ -16,7 +16,7 @@
 		</MkButton>
 	</div>
 
-	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :ad="true">
 		<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</XList>
 

src/client/ui/chat/side.vue

@@ -5,7 +5,7 @@
 		<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
 		<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 	</header>
-	<component :is="component" v-bind="props" :ref="changePage"/>
+	<component :is="component" v-bind="props" :ref="changePage" class="_flat_"/>
 </div>
 </template>
 

src/client/ui/deck/widgets-column.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .wtdtxvec {
 	--margin: 8px;
-	--panelShadow: none;
+	--panelBorder: none;
 
 	padding: 0 var(--margin);
 }

src/client/ui/default.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 		},
 
 		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 1 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 			window.addEventListener('scroll', () => {
 				sticky.calc(window.scrollY);
 			}, { passive: true });
@@ -230,8 +230,6 @@ export default defineComponent({
 	$widgets-hide-threshold: 1200px;
 	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
 
-	--panelShadow: 0 0 0 1px var(--divider);
-
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
@@ -290,7 +288,6 @@ export default defineComponent({
 			width: 750px;
 			margin: 0 16px 0 0;
 			background: var(--bg);
-			box-shadow: 0 0 0 1px var(--divider);
 			border-radius: 0;
 			--margin: 12px;
 
@@ -321,7 +318,7 @@ export default defineComponent({
 		}
 
 		> .widgets {
-			//--panelShadow: none;
+			//--panelBorder: none;
 			width: 300px;
 			margin-top: 16px;
 
@@ -342,14 +339,13 @@ export default defineComponent({
 			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
 
 			> .main {
-				margin-top: 1px;
+				margin-top: 0;
 				border-radius: var(--radius);
-				box-shadow: 0 0 0 1px var(--divider);
 			}
 
 			> .widgets {
 				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 1px;
+				margin-top: 0;
 			}
 		}