Remove designer part
Cagatay Civici
parent
4e13dc05fd
commit
70a9978e6b
|
|
@ -1,151 +0,0 @@
|
||||||
.landing-designer {
|
|
||||||
.designer-demo {
|
|
||||||
--dd-primary:#4f8ff7;
|
|
||||||
--dd-primary-darker:#3575dd;
|
|
||||||
--dd-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
||||||
|
|
||||||
.p-component {
|
|
||||||
font-family: var(--dd-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider {
|
|
||||||
.p-slider-range {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-handle {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputtext {
|
|
||||||
&:enabled:hover {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox {
|
|
||||||
&:not(.p-checkbox-disabled) .p-checkbox-box {
|
|
||||||
&:hover, &.p-focus {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.p-focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-box {
|
|
||||||
&.p-highlight {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&.p-button-outlined {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
.p-button-icon, .p-button-label {
|
|
||||||
color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:enabled:hover,
|
|
||||||
&:enabled:active {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:enabled:hover,
|
|
||||||
&:enabled:active {
|
|
||||||
background-color: var(--dd-primary-darker);
|
|
||||||
border-color: var(--dd-primary-darker);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox {
|
|
||||||
.p-listbox-list .p-listbox-item.p-highlight {
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputtext, .p-button, .p-listbox-item, .p-slider {
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transition: transform .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.demo-size-small {
|
|
||||||
.p-inputtext, .p-button {
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item {
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.demo-size-large {
|
|
||||||
.p-inputtext, .p-button {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .field {
|
|
||||||
padding: 1rem 2rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.designer-editor {
|
|
||||||
backdrop-filter: blur(1rem);
|
|
||||||
box-shadow: var(--home-card-shadow);
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.designer-controls {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -10,6 +10,5 @@ $landingBreakpointXL: 1199px;
|
||||||
@import './_getstarted';
|
@import './_getstarted';
|
||||||
@import './_themes';
|
@import './_themes';
|
||||||
@import './_blocks';
|
@import './_blocks';
|
||||||
@import './_designer';
|
|
||||||
@import './_templates';
|
@import './_templates';
|
||||||
@import './_features';
|
@import './_features';
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
<UsersSection />
|
<UsersSection />
|
||||||
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
||||||
<BlockSection />
|
<BlockSection />
|
||||||
<DesignerSection />
|
|
||||||
<TemplateSection />
|
<TemplateSection />
|
||||||
<FeaturesSection />
|
<FeaturesSection />
|
||||||
<FooterSection />
|
<FooterSection />
|
||||||
|
|
@ -23,7 +22,6 @@ import AppNews from '@/layouts/AppNews';
|
||||||
import HeroSection from './landing/HeroSection';
|
import HeroSection from './landing/HeroSection';
|
||||||
import AppTopBar from '@/layouts/AppTopBar.vue';
|
import AppTopBar from '@/layouts/AppTopBar.vue';
|
||||||
import BlockSection from './landing/BlockSection';
|
import BlockSection from './landing/BlockSection';
|
||||||
import DesignerSection from './landing/DesignerSection';
|
|
||||||
import FeaturesSection from './landing/FeaturesSection';
|
import FeaturesSection from './landing/FeaturesSection';
|
||||||
import FooterSection from './landing/FooterSection';
|
import FooterSection from './landing/FooterSection';
|
||||||
import TemplateSection from './landing/TemplateSection';
|
import TemplateSection from './landing/TemplateSection';
|
||||||
|
|
@ -101,7 +99,6 @@ export default {
|
||||||
HeroSection,
|
HeroSection,
|
||||||
ThemeSection,
|
ThemeSection,
|
||||||
BlockSection,
|
BlockSection,
|
||||||
DesignerSection,
|
|
||||||
TemplateSection,
|
TemplateSection,
|
||||||
UsersSection,
|
UsersSection,
|
||||||
FeaturesSection,
|
FeaturesSection,
|
||||||
|
|
|
||||||
|
|
@ -1,175 +0,0 @@
|
||||||
<template>
|
|
||||||
<section class="landing-designer py-8">
|
|
||||||
<div class="section-header">Theme Designer</div>
|
|
||||||
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
|
|
||||||
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-gray' : 'light-gray'}.svg')`, backgroundSize: 'cover' }">
|
|
||||||
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
|
|
||||||
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
|
|
||||||
<div class="text-center mb-4">
|
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
|
|
||||||
</div>
|
|
||||||
<div class="p-fluid">
|
|
||||||
<span class="font-semibold block mb-3">Primary</span>
|
|
||||||
<div>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Font</span>
|
|
||||||
<Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Size</span>
|
|
||||||
<div class="flex flex-wrap gap-4 align-items-center">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
|
|
||||||
<label for="size-small" class="ml-2 font-medium">Small</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
|
|
||||||
<label for="size-normal" class="ml-2 font-medium">Normal</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
|
|
||||||
<label for="size-large" class="ml-2 font-medium">Large</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Input Style</span>
|
|
||||||
<div class="flex align-items-center mb-6">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="inputStyle1" value="outlined" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
|
||||||
<label for="inputStyle1" class="ml-2 font-medium">Outlined</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center ml-4">
|
|
||||||
<RadioButton id="inputStyle2" value="filled" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
|
||||||
<label for="inputStyle2" class="ml-2 font-medium">Filled</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="https://designer.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
|
||||||
<span>View Full Version</span>
|
|
||||||
<i class="pi pi-arrow-right ml-auto"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
|
|
||||||
<div class="p-fluid formgrid grid pt-3">
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="username" class="font-semibold mb-3 p-component">Username</label>
|
|
||||||
<InputText id="username" type="text" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="email" class="font-semibold mb-3 p-component">Email</label>
|
|
||||||
<InputText id="email" type="text" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="price" class="font-semibold mb-3 p-component">Price</label>
|
|
||||||
<div class="p-inputgroup">
|
|
||||||
<span class="p-inputgroup-addon">$</span>
|
|
||||||
<InputNumber id="price" placeholder="Price" />
|
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="date" class="font-semibold mb-3 p-component">Date</label>
|
|
||||||
<div class="p-inputgroup">
|
|
||||||
<span class="p-inputgroup-addon">
|
|
||||||
<i class="pi pi-calendar"></i>
|
|
||||||
</span>
|
|
||||||
<InputMask id="date" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-3 p-component">City</span>
|
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="email" class="font-semibold mb-3 mt-3 p-component">Range</label>
|
|
||||||
<Slider v-model="range" range />
|
|
||||||
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Checkboxes</span>
|
|
||||||
<div class="flex flex-column xl:flex-row xl:align-items-center">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Checkbox id="cb1" v-model="values" :value="value1" name="cbvalue" />
|
|
||||||
<label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
|
|
||||||
<Checkbox id="cb2" v-model="values" :value="value2" name="cbvalue" />
|
|
||||||
<label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
|
|
||||||
<Button type="button" label="Clear" icon="pi pi-times" outlined class="ml-1"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
size: 'normal',
|
|
||||||
font: { label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
|
||||||
fonts: [
|
|
||||||
{ label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
|
|
||||||
{ label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
|
||||||
{ label: 'Trebuchet MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
|
|
||||||
{ label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
|
|
||||||
],
|
|
||||||
selectedCity: null,
|
|
||||||
cities: [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
],
|
|
||||||
range: [20, 80],
|
|
||||||
value1: 1,
|
|
||||||
value2: 2,
|
|
||||||
values: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
editor: null,
|
|
||||||
methods: {
|
|
||||||
changeTheme(color, darker) {
|
|
||||||
this.editor.style.setProperty('--dd-primary', color);
|
|
||||||
this.editor.style.setProperty('--dd-primary-darker', darker);
|
|
||||||
},
|
|
||||||
changeFont(event) {
|
|
||||||
this.editor.style.setProperty('--dd-font', event.value.value);
|
|
||||||
this.font = event.value;
|
|
||||||
},
|
|
||||||
onChange(value) {
|
|
||||||
this.$primevue.config.inputStyle = value;
|
|
||||||
},
|
|
||||||
editorRef(el) {
|
|
||||||
this.editor = el;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
editorclass() {
|
|
||||||
return [
|
|
||||||
'designer-demo',
|
|
||||||
{
|
|
||||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
|
||||||
'demo-size-small': this.size === 'small',
|
|
||||||
'demo-size-large': this.size === 'large'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
inputstyle() {
|
|
||||||
return this.$primevue.config.inputStyle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue