renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: refactor button attribute implementation

Browse Source
This commit is contained in:
Hakadao
2023-10-12 11:44:15 +08:00
parent 046320252c
commit f6e0efebce
4 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Button.vue
View File

@@ -41,8 +41,8 @@ function handleClick(evt: MouseEvent) {
:style="{
'backgroundColor': color,
'color': textColor,
'--b-radius': round ? '50px' : '',
'width': block ? '100%' : 'unset',
'--b-button-radius': round ? '50px' : '',
'width': block ? '100%' : 'var(--b-button-width)',
'justifyContent': center ? 'center' : ''
}"
@click="handleClick"
@@ -55,27 +55,28 @@ function handleClick(evt: MouseEvent) {
<style lang="scss" scoped>
.b-button {
--b-color: var(--bew-content-solid-1);
--b-color-hover: var(--bew-content-solid-1-hover);
--b-text-color: var(--bew-text-1);
--b-radius: var(--bew-radius);
--b-padding: 0 14px;
--b-font-size: 14px;
--b-icon-size: 15px;
--b-line-height: 35px;
--b-button-color: var(--bew-content-solid-1);
--b-button-color-hover: var(--bew-content-solid-1-hover);
--b-button-text-color: var(--bew-text-1);
--b-button-radius: var(--bew-radius);
--b-button-padding: 14px;
--b-button-font-size: 14px;
--b-button-icon-size: 15px;
--b-button-height: 35px;
--b-button-width: fit-content;
--at-apply: bg-$b-color hover:bg-$b-color-hover
rounded-$b-radius p-$b-padding transform-gpu active:scale-95
duration-300 flex items-center gap-2 text-size-$b-font-size
text-$b-text-color lh-$b-line-height h-$b-line-height;
--at-apply: bg-$b-button-color hover:bg-$b-button-color-hover
rounded-$b-button-radius p-x-$b-button-padding transform-gpu active:scale-95
duration-300 flex items-center gap-2 text-size-$b-button-font-size
text-$b-button-text-color lh-$b-button-height h-$b-button-height;
& svg {
--at-apply: text-size-$b-icon-size
--at-apply: text-size-$b-button-icon-size
}
&.frosted-glass {
--b-color: var(--bew-content-1);
--b-color-hover: var(--bew-content-1-hover);
--b-button-color: var(--bew-content-1);
--b-button-color-hover: var(--bew-content-1-hover);
backdrop-filter: var(--bew-filter-glass);
}
@@ -83,35 +84,35 @@ function handleClick(evt: MouseEvent) {
}
&--type-primary {
--b-color: var(--bew-theme-color);
--b-color-hover: var(--bew-theme-color);
--b-text-color: white;
--b-button-color: var(--bew-theme-color);
--b-button-color-hover: var(--bew-theme-color);
--b-button-text-color: white;
}
&--type-secondary {
--b-color: var(--bew-fill-1);
--b-color-hover: var(--bew-fill-2);
--b-text-color: var(--bew-text-1);
--b-button-color: var(--bew-fill-1);
--b-button-color-hover: var(--bew-fill-2);
--b-button-text-color: var(--bew-text-1);
}
&--type-error {
--b-color: var(--bew-error-color);
--b-color-hover: var(--bew-error-color)
--b-text-color: white;
--b-button-color: var(--bew-error-color);
--b-button-color-hover: var(--bew-error-color)
--b-button-text-color: white;
}
&--size-small {
--b-padding: 6px 12px;
--b-font-size: 14px;
--b-icon-size: 14px;
--b-line-height: 30px;
--b-button-padding: 6px;
--b-button-font-size: 14px;
--b-button-icon-size: 14px;
--b-button-height: 30px;
}
&--size-large {
--b-padding: 12px 16px;
--b-font-size: 15px;
--b-icon-size: 16px;
--b-line-height: 40px;
--b-button-padding: 12px;
--b-button-font-size: 15px;
--b-button-icon-size: 16px;
--b-button-height: 40px;
}
&--custom-color {

2
src/contentScripts/views/Favorites/Favorites.vue
View File

@@ -253,7 +253,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
</h3>
<p flex="~ col" gap-4>
<Button
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
@click="handlePlayAll"
>
<template #left>

8
src/contentScripts/views/History/History.vue
View File

@@ -486,7 +486,8 @@ function jumpToLoginPage() {
v-model.lazy.trim="keyword"
type="text"
:placeholder="t('history.search_watch_history')"
p="x-14px y-10px"
p="x-14px"
lh-35px h-35px
rounded="$bew-radius"
bg="$bew-content-solid-1"
shadow="$bew-shadow-1"
@@ -494,7 +495,7 @@ function jumpToLoginPage() {
w-full
@keyup.enter="handleSearch"
>
<Button shadow="$bew-shadow-1" @click="handleClearAllWatchHistory">
<Button shadow="$bew-shadow-1" block @click="handleClearAllWatchHistory">
<template #left>
<tabler:trash />
</template>
@@ -503,6 +504,7 @@ function jumpToLoginPage() {
<Button
v-if="!historyStatus"
shadow="$bew-shadow-1"
block
@click="handlePauseWatchHistory"
>
<template #left>
@@ -510,7 +512,7 @@ function jumpToLoginPage() {
</template>
{{ $t('history.pause_watch_history') }}
</Button>
<Button v-else shadow="$bew-shadow-1" @click="handleTurnOnWatchHistory">
<Button v-else shadow="$bew-shadow-1" block @click="handleTurnOnWatchHistory">
<template #left>
<ph:play-circle-bold />
</template>

6
src/contentScripts/views/WatchLater/WatchLater.vue
View File

@@ -296,7 +296,7 @@ function jumpToLoginPage() {
</h3>
<p v-if="watchLaterList.length > 0" flex="~ col" gap-4>
<Button
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
@click="handlePlayAll"
>
<template #left>
@@ -305,7 +305,7 @@ function jumpToLoginPage() {
{{ t('watch_later.play_all') }}
</Button>
<Button
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
@click="handleClearAllWatchLater"
>
<template #left>
@@ -314,7 +314,7 @@ function jumpToLoginPage() {
{{ t('watch_later.clear_all') }}
</Button>
<Button
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
@click="handleRemoveWatchedVideos"
>
<template #left>