mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 19:17:48 +00:00
chore: Update buttons in dashboard (#11145)
# Pull Request Template ## Changes * Remove unused component `MaskedText.vue` * Remove unused component `ContactIntro.vue` * Remove unused `AddCustomViews.vue` component * Update buttons in help center upgrade page <img width="741" alt="image" src="https://github.com/user-attachments/assets/f46b8ffa-ef74-4b83-95c1-83842844c4b7" /> * Update SLA view details button in reports page <img width="419" alt="image" src="https://github.com/user-attachments/assets/7db6bff6-9ba5-4c13-850f-b9d4dbb55489" /> * Update assign to me conversation action button <img width="152" alt="image" src="https://github.com/user-attachments/assets/587ee1fe-93c9-48e0-910a-390dd4eac1f2" /> * Update button in participants action <img width="365" alt="image" src="https://github.com/user-attachments/assets/50eb386f-882b-4277-ad61-d557893ac490" /> <img width="365" alt="image" src="https://github.com/user-attachments/assets/3c64ed42-0203-43c6-9a26-8ad9465aa394" /> * Update the show more attributes button <img width="365" alt="image" src="https://github.com/user-attachments/assets/f2105a2f-8441-4d8b-b355-dfe97ce2e362" /> * Update SLA empty state <img width="376" alt="image" src="https://github.com/user-attachments/assets/55fd4376-6183-45c9-acb2-6ad5a6a58730" /> * Update create new label button from dropdown <img width="376" alt="image" src="https://github.com/user-attachments/assets/bb8226d0-795f-431f-8fe4-15d15ee1d695" /> * Update add macro button <img width="382" alt="image" src="https://github.com/user-attachments/assets/b6375402-5213-4041-841b-09c2157ed56a" /> * Update copy button <img width="382" alt="image" src="https://github.com/user-attachments/assets/f1929d63-f7ca-4eab-bfa8-716be2aa4be8" /> * Update the buttons in banner component <img width="849" alt="image" src="https://github.com/user-attachments/assets/bb86b498-ab8e-4a92-8c6a-60edcef0fd7b" /> <img width="838" alt="image" src="https://github.com/user-attachments/assets/4bde00de-907e-49ac-9128-f364a90cd3c1" /> * Update table pagination buttons <img width="968" alt="image" src="https://github.com/user-attachments/assets/8d439af6-8126-4fad-a3fe-89b26a56f880" /> <img width="968" alt="image" src="https://github.com/user-attachments/assets/a178b3d7-3385-4a2b-a0d7-35be9a25fd93" /> * Update filter chip buttons and dropdown colors <img width="541" alt="image" src="https://github.com/user-attachments/assets/7be1f418-82df-4db6-b265-4c185fc79f4b" /> <img width="541" alt="image" src="https://github.com/user-attachments/assets/69110d75-85e9-4974-8c2a-e195b23a335c" /> <img width="173" alt="image" src="https://github.com/user-attachments/assets/c8f5bc82-15b4-4f25-b7d4-35a9280ec7c6" /> <img width="565" alt="image" src="https://github.com/user-attachments/assets/7dad1d00-784b-46eb-b823-e6e55d5f9dc8" /> <img width="565" alt="image" src="https://github.com/user-attachments/assets/384a86ed-f45f-488c-b9aa-1f02b16c813d" /> --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
@@ -1,5 +1,10 @@
|
||||
<script>
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NextButton,
|
||||
},
|
||||
props: {
|
||||
bannerMessage: {
|
||||
type: String,
|
||||
@@ -19,7 +24,7 @@ export default {
|
||||
},
|
||||
actionButtonVariant: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: 'faded',
|
||||
},
|
||||
actionButtonLabel: {
|
||||
type: String,
|
||||
@@ -27,7 +32,7 @@ export default {
|
||||
},
|
||||
actionButtonIcon: {
|
||||
type: String,
|
||||
default: 'arrow-right',
|
||||
default: 'i-lucide-arrow-right',
|
||||
},
|
||||
colorScheme: {
|
||||
type: String,
|
||||
@@ -48,6 +53,18 @@ export default {
|
||||
}
|
||||
return classList;
|
||||
},
|
||||
// TODO - Remove this method when we standardize
|
||||
// the button color and variant names
|
||||
getButtonColor() {
|
||||
const colorMap = {
|
||||
primary: 'blue',
|
||||
secondary: 'blue',
|
||||
alert: 'ruby',
|
||||
warning: 'amber',
|
||||
};
|
||||
|
||||
return colorMap[this.colorScheme] || 'blue';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
@@ -77,27 +94,23 @@ export default {
|
||||
</a>
|
||||
</span>
|
||||
<div class="actions">
|
||||
<woot-button
|
||||
<NextButton
|
||||
v-if="hasActionButton"
|
||||
size="tiny"
|
||||
xs
|
||||
:icon="actionButtonIcon"
|
||||
:variant="actionButtonVariant"
|
||||
color-scheme="primary"
|
||||
class-names="banner-action__button"
|
||||
:color="getButtonColor"
|
||||
:label="actionButtonLabel"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ actionButtonLabel }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
/>
|
||||
<NextButton
|
||||
v-if="hasCloseButton"
|
||||
size="tiny"
|
||||
:color-scheme="colorScheme"
|
||||
icon="dismiss-circle"
|
||||
class-names="banner-action__button"
|
||||
xs
|
||||
icon="i-lucide-circle-x"
|
||||
:color="getButtonColor"
|
||||
:label="$t('GENERAL_SETTINGS.DISMISS')"
|
||||
@click="onClickClose"
|
||||
>
|
||||
{{ $t('GENERAL_SETTINGS.DISMISS') }}
|
||||
</woot-button>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -106,13 +119,6 @@ export default {
|
||||
.banner {
|
||||
&.primary {
|
||||
@apply bg-woot-500 dark:bg-woot-500;
|
||||
.banner-action__button {
|
||||
@apply bg-woot-600 dark:bg-woot-600 border-none text-white;
|
||||
|
||||
&:hover {
|
||||
@apply bg-woot-700 dark:bg-woot-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
@@ -124,13 +130,6 @@ export default {
|
||||
|
||||
&.alert {
|
||||
@apply bg-n-ruby-3 text-n-ruby-12;
|
||||
.banner-action__button {
|
||||
@apply border-none text-n-ruby-12 bg-n-ruby-5;
|
||||
|
||||
&:hover {
|
||||
@apply bg-n-ruby-4;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-n-ruby-12;
|
||||
@@ -146,21 +145,12 @@ export default {
|
||||
|
||||
&.gray {
|
||||
@apply text-black-500 dark:text-black-500;
|
||||
.banner-action__button {
|
||||
@apply text-white dark:text-white;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply ml-1 underline text-white dark:text-white text-xs;
|
||||
}
|
||||
|
||||
.banner-action__button {
|
||||
::v-deep .button__content {
|
||||
@apply whitespace-nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-message {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user