Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 Integrate icons into build #2088

Merged
merged 5 commits into from
Jul 30, 2023
Merged

🐛 Integrate icons into build #2088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b091c08
🐛 Work on inline icons
moisout Jul 5, 2023
1745df4
🐛 Include icons in build
moisout Jul 29, 2023
e46dc4e
🐛 Apply icon styles properly
moisout Jul 30, 2023
c87c425
⬆️ Upgrade package
moisout Jul 30, 2023
b2af8a1
📝 Update changelog
moisout Jul 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added

- Create release on CHANGELOG.md edit [#2085](https://github.com/ViewTube/viewtube/pull/2085)
- Switch to unocss icons and include in build [#2088](https://github.com/ViewTube/viewtube/pull/2088)

## [0.10.0] - 2023-01-30

Expand Down
468 changes: 206 additions & 262 deletions client/assets/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 7 additions & 13 deletions client/assets/styles/popup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,12 @@
width: 38px;
z-index: 5;
cursor: pointer;
background-color: var(--bgcolor-alt);
border-radius: 25px;

.material-design-icon__svg {
height: 38px !important;
width: 38px !important;
position: unset !important;
.vt-icon {
height: 38px;
width: 38px;
position: unset;
}
}

Expand All @@ -77,15 +76,10 @@

h2 {
padding: 40px 0 0 0;
display: flex;

span {
margin: 0 10px 0 0;

svg {
bottom: -0.2rem !important;
height: 1em !important;
width: 1em !important;
}
.vt-icon {
margin: auto 10px auto 0;
}
}

Expand Down
14 changes: 4 additions & 10 deletions client/components/About.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const copyCommitHash = () => {
<template>
<div class="about popup">
<div class="about-container popup-container">
<Icon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
<VTIcon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
<h1>About</h1>
<div class="logo-about">
<img class="logo-about-img" src="@/assets/icon.svg" alt="ViewTube" />
Expand All @@ -47,13 +47,13 @@ const copyCommitHash = () => {
:href="`https://github.com/ViewTube/viewtube/commit/${commit}`"
target="_blank"
rel="noreferrer noopener"
><Icon name="mdi:open-in-new"
><VTIcon name="mdi:open-in-new"
/></a>
</h4>
</div>
<div class="links-about">
<BadgeButton :href="'https://github.com/viewtube/viewtube'">
<Icon name="mdi:github" />ViewTube
<VTIcon name="mdi:github" />ViewTube
</BadgeButton>
</div>
<div class="external-service-container">
Expand Down Expand Up @@ -183,17 +183,11 @@ const copyCommitHash = () => {
// Break text
word-break: break-word;

.material-design-icon {
.vt-icon {
width: 14px;
height: 14px;
padding: 2px 0 0 0;
box-sizing: border-box;

.material-design-icon__svg {
width: 14px;
height: 14px;
display: block;
}
}
}
}
Expand Down
19 changes: 9 additions & 10 deletions client/components/Comment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,18 +86,18 @@ const loadMoreReplies = () => {
</div>

<div class="likes comment-property">
<Icon name="mdi:thumb-up" />
<VTIcon name="mdi:thumb-up" />
<span>{{ comment.likeCount?.toLocaleString('en-US') }}</span>
</div>
<div
v-if="comment.creatorHeart"
v-tippy="`❤ by ${channelAuthorName}`"
class="creatorHeart comment-property tooltip"
>
<Icon name="mdi:heart" title="" />
<VTIcon name="mdi:heart" title="" />
</div>
<div v-if="comment.isEdited" class="edited comment-property">
<Icon name="mdi:pencil" />
<VTIcon name="mdi:pencil" />
<span class="edited-text">edited</span>
</div>
</div>
Expand All @@ -108,15 +108,15 @@ const loadMoreReplies = () => {
:click="loadReplies"
:loading="loadingReplies"
>
<Icon name="mdi:comment-outline" />
<VTIcon name="mdi:comment-outline" />
<p>
show
{{ comment.replyCount?.toLocaleString('en-US') }}
replies
</p>
</BadgeButton>
<BadgeButton v-if="repliesLoaded" class="comment-reply-count" :click="hideReplies">
<Icon name="mdi:comment-remove-outline" />
<VTIcon name="mdi:comment-remove-outline" />
<p>hide replies</p>
</BadgeButton>
<div v-if="repliesLoaded" class="comment-replies-list">
Expand All @@ -134,7 +134,7 @@ const loadMoreReplies = () => {
:click="loadMoreReplies"
:loading="repliesContinuationLoading"
>
<Icon name="mdi:reload" />
<VTIcon name="mdi:reload" />
<p>Show more</p>
</BadgeButton>
</div>
Expand Down Expand Up @@ -219,10 +219,9 @@ const loadMoreReplies = () => {
gap: 4px;
align-items: center;

.material-design-icon,
.material-design-icon__svg {
height: 1.2em !important;
width: 1.2em !important;
.vt-icon {
height: 1.2em;
width: 1.2em;
}

.edited-text {
Expand Down
7 changes: 3 additions & 4 deletions client/components/CommunityPost.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ defineProps<{
</div>
<div class="post-info">
<div class="info-item">
<Icon name="mdi:thumb-up" />
<VTIcon name="mdi:thumb-up" />
<p>{{ communityPost.voteCount ?? 0 }}</p>
</div>
<div class="info-item">
<Icon name="mdi:comment-outline" />
<VTIcon name="mdi:comment-outline" />
<p class="comments">{{ communityPost.commentCount ?? 0 }}</p>
</div>
</div>
Expand Down Expand Up @@ -80,8 +80,7 @@ defineProps<{
gap: 5px;
color: var(--subtitle-color-light);

.material-design-icon,
:deep(.material-design-icon__svg) {
:deep(.vt-icon) {
width: 20px;
height: 20px;
}
Expand Down
4 changes: 2 additions & 2 deletions client/components/MainSearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
class="search-btn tooltip"
@click.self.prevent="onSearchButton"
>
<Icon name="mdi:magnify" />
<VTIcon name="mdi:magnify" />
</a>
<span class="search-line-bottom line" />
<SearchAutoComplete
ref="autocompleteRef"
:search-value="searchValue"
@searchValueUpdate="onAutocompleteUpdate"

Check warning on line 37 in client/components/MainSearchBox.vue

View workflow job for this annotation

GitHub Actions / lint:client 

v-on event '@searchValueUpdate' must be hyphenated
@autocompleteEnter="onAutocompleteEnter"

Check warning on line 38 in client/components/MainSearchBox.vue

View workflow job for this annotation

GitHub Actions / lint:client 

v-on event '@autocompleteEnter' must be hyphenated
/>
</div>
</template>
Expand Down Expand Up @@ -194,7 +194,7 @@
display: flex;
user-select: none;

.material-design-icon {
.vt-icon {
margin: auto;
left: -3px !important;
display: flex;
Expand Down
7 changes: 3 additions & 4 deletions client/components/SectionTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ withDefaults(
<div class="section-title">
<nuxt-link v-if="link" class="title" :to="link">
{{ title }}
<Icon name="mdi:chevron-right" />
<VTIcon name="mdi:chevron-right" />
</nuxt-link>
<h2 v-else class="title">
{{ title }}
Expand Down Expand Up @@ -44,13 +44,12 @@ withDefaults(
gap: 10px;

&:hover {
.material-design-icon {
.vt-icon {
transform: translateX(-10px);
}
}

.material-design-icon,
.material-design-icon__svg {
.vt-icon {
height: 1.2em;
width: 1.2em;
transition: transform 300ms $intro-easing;
Expand Down
57 changes: 35 additions & 22 deletions client/components/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,20 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
<div class="settings popup">
<div class="settings-container popup-container">
<div class="settings-header">
<Icon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
<VTIcon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
<h1 class="settings-title">
Settings
<div class="cloud-icon-container">
<transition name="icon-switch" mode="out-in">
<Icon
<VTIcon
v-if="!settingsStore.settingsSaving"
v-tippy="'Settings synchronized'"
name="mdi:cloud-check-outline"
class="cloud-icon"
/>
</transition>
<transition name="icon-switch" mode="out-in">
<Icon
<VTIcon
v-if="settingsStore.settingsSaving"
v-tippy="'Saving settings'"
name="mdi:reload"
Expand All @@ -47,19 +47,19 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
</div>
</h1>
</div>
<h2><Icon name="mdi:brightness-4" />Theme</h2>
<h2><VTIcon name="mdi:brightness-4" />Theme</h2>
<div class="theme-selector-container">
<ThemeSelector />
</div>
<h2><Icon name="mdi:book-open-variant" />Chapters</h2>
<h2><VTIcon name="mdi:book-open-variant" />Chapters</h2>
<SwitchButton
:value="settingsStore.chapters"
:label="'Show chapters on a video'"
:disabled="false"
:right="true"
@valuechange="val => settingsStore.setChapters(val)"
/>
<h2><Icon name="mdi:history" />History</h2>
<h2><VTIcon name="mdi:history" />History</h2>
<SwitchButton
:value="settingsStore.saveVideoHistory"
:label="'Save video history and progress'"
Expand Down Expand Up @@ -97,7 +97,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#0fca15'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentSponsor(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentSponsor(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -107,7 +109,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#07faf0'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentIntro(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentIntro(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -117,7 +121,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#0103e1'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentOutro(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentOutro(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -127,7 +133,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#b711df'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentInteraction(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentInteraction(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -137,7 +145,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#fdfb0e'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentSelfpromo(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentSelfpromo(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -147,7 +157,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#f89c06'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentMusicOfftopic(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentMusicOfftopic(val as SegmentOption)
"
/>
<MultiOptionButton
:options="sponsorblockSegmentOptions"
Expand All @@ -157,12 +169,14 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
:right="true"
:color-mark="'#f70000'"
class="sponsorblock-option"
@update:model-value="val => settingsStore.setSponsorblockSegmentPreview(val as SegmentOption)"
@update:model-value="
val => settingsStore.setSponsorblockSegmentPreview(val as SegmentOption)
"
/>
</div>
</div>

<h2><Icon name="mdi:window-restore" />Miniplayer</h2>
<h2><VTIcon name="mdi:window-restore" />Miniplayer</h2>
<SwitchButton
:value="settingsStore.miniplayer"
:label="'Enable miniplayer'"
Expand All @@ -172,7 +186,7 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
@valuechange="val => settingsStore.setMiniplayer(val)"
/>

<h2><Icon name="mdi:home" />Homescreen</h2>
<h2><VTIcon name="mdi:home" />Homescreen</h2>
<SwitchButton
:value="settingsStore.showHomeSubscriptions"
:label="'Show subscriptions on home screen'"
Expand All @@ -182,7 +196,7 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
@valuechange="val => settingsStore.setShowHomeSubscriptions(val)"
/>

<h2><Icon name="mdi:television" />Videoplayer</h2>
<h2><VTIcon name="mdi:television" />Videoplayer</h2>
<div class="settings-dropdown-menu">
<div class="quality-label">
<label>Default video quality</label>
Expand Down Expand Up @@ -296,12 +310,11 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
position: absolute;
top: 0;
left: 0;
transition: opacity 300ms $intro-easing, transform 300ms $intro-easing;

.material-design-icon__svg {
position: absolute;
left: 1px;
}
transition:
opacity 300ms $intro-easing,
transform 300ms $intro-easing;
width: 24px;
height: 24px;
}

.small-saving-spinner {
Expand Down
Loading
Loading