Removed landing themes
parent
88ca527c96
commit
94fe94bf52
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
|
<section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
|
||||||
<div class="section-header">PrimeBlocks</div>
|
<div class="section-header">Blocks</div>
|
||||||
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
|
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
|
||||||
<div class="flex justify-content-center mt-4">
|
<div class="flex justify-content-center mt-4">
|
||||||
<a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
|
<a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
|
||||||
|
|
|
@ -1,12 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="landing-themes py-8">
|
<section class="landing-themes py-8">
|
||||||
<div class="section-header">Themes</div>
|
<div class="section-header">Components</div>
|
||||||
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
|
<p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p>
|
||||||
<div class="flex flex-wrap justify-content-center px-5">
|
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('aura') }]" @click="changeTheme('aura', 'green')">PrimeOne</button>
|
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
|
||||||
</div>
|
|
||||||
<div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8">
|
<div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8">
|
||||||
<div class="box overflow-hidden z-1 p-5 table-container">
|
<div class="box overflow-hidden z-1 p-5 table-container">
|
||||||
<DataTable
|
<DataTable
|
||||||
|
@ -92,10 +87,6 @@ import { CustomerService } from '@/service/CustomerService';
|
||||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
emits: ['table-theme-change'],
|
|
||||||
props: {
|
|
||||||
theme: null
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
customers: null,
|
customers: null,
|
||||||
|
@ -122,11 +113,6 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeTheme(name, color) {
|
|
||||||
let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
|
|
||||||
|
|
||||||
this.$emit('table-theme-change', newTheme);
|
|
||||||
},
|
|
||||||
formatDate(value) {
|
formatDate(value) {
|
||||||
return value.toLocaleDateString('en-US', {
|
return value.toLocaleDateString('en-US', {
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
<FeaturesSection />
|
<FeaturesSection />
|
||||||
<UsersSection />
|
<UsersSection />
|
||||||
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
<ThemeSection />
|
||||||
<BlockSection />
|
<BlockSection />
|
||||||
<TemplateSection />
|
<TemplateSection />
|
||||||
<FooterSection />
|
<FooterSection />
|
||||||
|
@ -20,7 +20,6 @@ import HeroSection from '@/components/landing/HeroSection.vue';
|
||||||
import TemplateSection from '@/components/landing/TemplateSection.vue';
|
import TemplateSection from '@/components/landing/TemplateSection.vue';
|
||||||
import ThemeSection from '@/components/landing/ThemeSection.vue';
|
import ThemeSection from '@/components/landing/ThemeSection.vue';
|
||||||
import UsersSection from '@/components/landing/UsersSection.vue';
|
import UsersSection from '@/components/landing/UsersSection.vue';
|
||||||
import EventBus from '@/layouts/AppEventBus';
|
|
||||||
import AppNews from '@/layouts/AppNews';
|
import AppNews from '@/layouts/AppNews';
|
||||||
import AppTopBar from '@/layouts/AppTopBar.vue';
|
import AppTopBar from '@/layouts/AppTopBar.vue';
|
||||||
|
|
||||||
|
@ -36,12 +35,6 @@ export default {
|
||||||
default: null
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableTheme: 'aura-light-green'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
themeChangeListener: null,
|
|
||||||
mounted() {
|
mounted() {
|
||||||
let afId = this.$route.query['af_id'];
|
let afId = this.$route.query['af_id'];
|
||||||
|
|
||||||
|
@ -53,40 +46,6 @@ export default {
|
||||||
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
|
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
onDarkModeToggle() {
|
|
||||||
const newTheme = this.$appState.darkTheme ? 'aura-light-green' : 'aura-dark-green';
|
|
||||||
const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
|
|
||||||
|
|
||||||
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
|
|
||||||
this.replaceTableTheme(newTableTheme);
|
|
||||||
},
|
|
||||||
onTableThemeChange(value) {
|
|
||||||
this.replaceTableTheme(value);
|
|
||||||
},
|
|
||||||
replaceTableTheme(newTheme) {
|
|
||||||
const elementId = 'home-table-link';
|
|
||||||
const linkElement = document.getElementById(elementId);
|
|
||||||
const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
|
|
||||||
const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
|
|
||||||
|
|
||||||
if (currentTableTheme !== newTheme && tableThemeTokens) {
|
|
||||||
const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
|
|
||||||
|
|
||||||
const cloneLinkElement = linkElement.cloneNode(true);
|
|
||||||
|
|
||||||
cloneLinkElement.setAttribute('id', elementId + '-clone');
|
|
||||||
cloneLinkElement.setAttribute('href', newThemeUrl);
|
|
||||||
cloneLinkElement.addEventListener('load', () => {
|
|
||||||
linkElement.remove();
|
|
||||||
cloneLinkElement.setAttribute('id', elementId);
|
|
||||||
});
|
|
||||||
linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
|
||||||
|
|
||||||
this.tableTheme = newTheme;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
landingClass() {
|
landingClass() {
|
||||||
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }];
|
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }];
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue