fix: small stylistic changes on the comments

This commit is contained in:
Alex 2022-04-22 21:06:31 +12:00
parent a075c4167a
commit 6d47e97121
3 changed files with 40 additions and 20 deletions

View File

@ -54,32 +54,46 @@
{{ commentRenderer.publishedTimeText.runs[0].text }} {{ commentRenderer.publishedTimeText.runs[0].text }}
</span> </span>
</div> </div>
<collapsable-text :lines="4"> <collapsable-text
:lines="4"
:expandText="
commentRenderer.expandButton.buttonRenderer.text.runs[0].text
"
:collapseText="
commentRenderer.collapseButton.buttonRenderer.text.runs[0].text
"
>
<yt-text-formatter :textRuns="commentRenderer.contentText.runs"> <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
</yt-text-formatter> </yt-text-formatter>
</collapsable-text> </collapsable-text>
<div class="toolbar"> <div class="toolbar">
<v-btn-toggle v-model="voteStatus" group>
<div class="toolbar--item"> <div class="toolbar--item">
<v-btn class="toolbar--button like" disabled icon x-small> <v-btn class="toolbar--button like" disabled icon x-small plain>
<v-icon small left>mdi-thumb-up</v-icon> <v-icon small>mdi-thumb-up</v-icon>
</v-btn> </v-btn>
</div>
<div class="toolbar--item">
<span <span
v-text="commentRenderer.voteCount.simpleText" v-text="commentRenderer.voteCount.simpleText"
class="like-count mr-1 subtitle-2" class="like-count mr-1 subtitle-2"
></span> ></span>
</div> </div>
<div class="toolbar--item"> <div class="toolbar--item">
<v-btn class="toolbar--button dislike" disabled icon x-small> <v-btn class="toolbar--button dislike" disabled icon x-small plain>
<v-icon small>mdi-thumb-down</v-icon> <v-icon small>mdi-thumb-down</v-icon>
</v-btn> </v-btn>
</div> </div>
</v-btn-toggle>
<div class="toolbar--item"> <div class="toolbar--item">
<v-btn class="toolbar--button reply" disabled icon x-small> <v-btn class="toolbar--button reply ml-2" disabled icon x-small plain>
<v-icon small>mdi-comment</v-icon> <v-icon small>mdi-comment</v-icon>
</v-btn> </v-btn>
</div> </div>
<div class="toolbar--item" v-if="commentRenderer.replyCount">
<span
v-text="commentRenderer.replyCount"
class="like-count mr-1 subtitle-2"
></span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -151,6 +165,10 @@
color: #fff; color: #fff;
} }
} }
.toolbar--button::v-deep.v-btn--active .v-btn__content {
color: var(--v-primary-base);
}
</style> </style>
<script> <script>
@ -171,6 +189,7 @@ export default {
data() { data() {
return { return {
commentRenderer: null, commentRenderer: null,
voteStatus: null,
}; };
}, },

View File

@ -8,8 +8,9 @@
<slot></slot> <slot></slot>
</div> </div>
<a <a
class="toggle-collapse" class="toggle-collapse background--text font-weight-bold"
@click="expanded = !expanded" @click="expanded = !expanded"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
v-if="expandable" v-if="expandable"
v-text="expanded ? collapseText : expandText" v-text="expanded ? collapseText : expandText"
></a> ></a>

View File

@ -284,7 +284,7 @@ export default {
this.cpn = getCpn(); this.cpn = getCpn();
this.initWatchTime().then(() => { this.initWatchTime().then(() => {
this.sendWatchTime(); this.sendWatchTime();
this.interval = setInterval(this.sendWatchTime, 30000); this.interval = setInterval(this.sendWatchTime, 60000);
}); });
}); });