vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

update for new free 6 themes

pull/3598/head
Tuğçe Küçükoğlu 2023-01-27 14:56:16 +03:00
parent f20095dd27
commit 81afd11535
6 changed files with 71 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@ -9,11 +9,3 @@ coverage
dist
.DS_Store
.vscode
# Themes
public/themes/soho-light/
public/themes/soho-dark/
public/themes/viva-light/
public/themes/viva-dark/
public/themes/mira/
public/themes/nano/

2
gulpfile.js
View File

@ -17,7 +17,7 @@ gulp.task('build-css', function () {
});
gulp.task('build-themes', function () {
return gulp.src(['public/themes/**/*', '!public/themes/soho-*/**/*', '!public/themes/viva-*/**/*', '!public/themes/mira/**/*', '!public/themes/nano/**/*']).pipe(gulp.dest('dist/resources/themes'));
return gulp.src(['public/themes/**/*']).pipe(gulp.dest('dist/resources/themes'));
});
gulp.task('images', function () {

83
layouts/AppConfigurator.vue
View File

@ -129,7 +129,7 @@
</div>
</div>
<h5 class="flex align-items-center">PrimeOne Design <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></h5>
<h5 class="flex align-items-center">PrimeOne Design</h5>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
@ -181,6 +181,46 @@
</div>
</div>
<h5 class="flex align-items-center">Misc</h5>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button>
<span>Soho Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button>
<span>Soho Dark</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="/demo/images/themes/viva-light.svg" alt="Viva Light" />
</button>
<span>Viva Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button>
<span>Viva Dark</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button>
<span>Mira</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button>
<span>Nano</span>
</div>
</div>
<h5>PrimeOne Design - Legacy</h5>
<div class="grid free-themes">
<div class="col-3">
@ -257,47 +297,6 @@
</div>
</div>
<h4>Premium Themes</h4>
<p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button>
<span>Soho Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button>
<span>Soho Dark</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="/demo/images/themes/viva-light.svg" alt="Viva Light" />
</button>
<span>Viva Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button>
<span>Viva Dark</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button>
<span>Mira</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button>
<span>Nano</span>
</div>
</div>
<h4>Admin Templates</h4>
<p>Beautifully crafted application templates by PrimeTek.</p>
<div class="grid premium-themes">

44
layouts/AppTopBar.vue
View File

@ -82,7 +82,7 @@
<a @click="changeTheme($event, 'fluent-light')"><img :src="$config.public.contextPath + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
</li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE</li>
<li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
</li>
@ -108,7 +108,27 @@
<a @click="changeTheme($event, 'lara-dark-teal')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li>
<li class="topbar-submenu-header">PRIMEONE 2021</li>
<li class="topbar-submenu-header">MISC</li>
<li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li>
<li class="topbar-submenu-header">PRIMEONE - LEGACY</li>
<li>
<a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
</li>
@ -145,26 +165,6 @@
<li>
<a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
</li>
<li class="topbar-submenu-header">PREMIUM</li>
<li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li>
</ul>
</transition>
</li>

6
pages/setup/index.vue
View File

@ -154,6 +154,12 @@ primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/soho-light/theme.css
primevue/resources/themes/soho-dark/theme.css
primevue/resources/themes/viva-light/theme.css
primevue/resources/themes/viva-dark/theme.css
primevue/resources/themes/mira/theme.css
primevue/resources/themes/nano/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css

3
pages/theming/index.vue
View File

@ -32,8 +32,7 @@
<p>
<a href="https://www.primefaces.org/designer/primevue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer. PrimeVue only ships the
generated CSS of <b>Material</b>, <b>Bootstrap</b>, <b>Tailwind</b>, <b>FluentUI</b>, <b>Saga</b>, <b>Vela</b>, <b>Arya</b> and legacy themes whereas Designer provides full access to the whole SASS structure and the variables of these
pre-built themes for easier customization. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeVue distribution.
generated CSS of the themes whereas Designer provides full access to the whole SASS structure and the variables of these pre-built themes for easier customization.
</p>
<p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>