feat: organizando estilos da main

master
guilherme 2025-06-17 17:28:31 -03:00
parent 2df7cfc81e
commit 8bd528c3c6
91 changed files with 464 additions and 264 deletions

View File

@ -1,5 +1,5 @@
:root { :root {
--content-alt-bg-color:#E8F1F8; --content-alt-bg-color:#ffffff;
} }
.order-badge { .order-badge {

View File

@ -1,5 +1,5 @@
:root { :root {
--content-alt-bg-color: #e8f1f8; --content-alt-bg-color: #ffffff;
} }
/* din-next-ultra-light - latin */ /* din-next-ultra-light - latin */
@ -6574,7 +6574,7 @@ body {
height: 100%; height: 100%;
} }
body.main-body { body.main-body {
background: linear-gradient(99deg, #f6f9fe 0%, #e8f1f8 100%); background: #ffffff;
} }
body a { body a {
color: #2c84d8; color: #2c84d8;

View File

@ -4,7 +4,7 @@ html {
} }
body { body {
font-family: 'Open Sans'; font-family: 'DIN Next';
font-size: $fontSize; font-size: $fontSize;
color: $textColor; color: $textColor;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

View File

@ -38,7 +38,7 @@ mark {
background: #FFF8E1; background: #FFF8E1;
padding: .25rem .4rem; padding: .25rem .4rem;
border-radius: $borderRadius; border-radius: $borderRadius;
font-family: 'Open Sans'; font-family: 'DIN Next';
} }
blockquote { blockquote {

View File

@ -1,6 +1,6 @@
//general //general
$fontSize:14px !default; $fontSize:14px !default;
$fontFamily: 'Open Sans' !default; $fontFamily: 'DIN Next' !default;
$mobileBreakpoint:991px !default; $mobileBreakpoint:991px !default;
$borderRadius:5px !default; $borderRadius:5px !default;
$animationDuration:.2s !default; $animationDuration:.2s !default;

View File

@ -3,7 +3,7 @@ $textColor:#515C66 !default;
$textSecondaryColor:#657380 !default; $textSecondaryColor:#657380 !default;
$contentBgColor:#FDFEFF !default; $contentBgColor:#FDFEFF !default;
$contentAltBgColor:#E8F1F8 !default; $contentAltBgColor:#ffffff !default;
$dividerColor: #E8F1F8 !default; $dividerColor: #E8F1F8 !default;
$menuTooltipBgColor:#1c202c !default; $menuTooltipBgColor:#1c202c !default;

View File

@ -29,7 +29,7 @@ $hoverBg:rgba(#4E565F,.7) !default;
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade000 !default; $textColor:$shade000 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -29,7 +29,7 @@ $hoverBg: rgba(#495771,.7) !default;
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade000 !default; $textColor:$shade000 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -27,7 +27,7 @@ $shade900:#252F44 !default; //unused
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade700 !default; $textColor:$shade700 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -1,71 +1,149 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" <ui:composition
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"> xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<div id="layout-config" class="layout-config"> <div id="layout-config" class="layout-config">
<div class="layout-config-content"> <div class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button"> <a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog"/> <i class="pi pi-cog" />
</a> </a>
<h:form id="config-form" styleClass="layout-config-form"> <h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header"> <div class="layout-config-header">
<h5>Theme Customization</h5> <h5>Theme Customization</h5>
<span>Poseidon offers different themes for layout, topbar, menu etc.</span> <span
>Poseidon offers different themes for layout, topbar, menu
etc.</span
>
</div> </div>
<p:outputPanel id="lightdark-panel" styleClass="layout-config-section options"> <p:outputPanel
id="lightdark-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Layout Mode</span> <span class="section-name">Layout Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)" > <p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.darkMode}"
onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"
>
<f:selectItem itemLabel="Light" itemValue="light" /> <f:selectItem itemLabel="Light" itemValue="light" />
<f:selectItem itemLabel="Dark" itemValue="dark" /> <f:selectItem itemLabel="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" /> <f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/> <p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form logolink"
/>
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="menumodes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="menumodes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Mode</span> <span class="section-name">Menu Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" > <p:selectOneRadio
<f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" /> layout="responsive"
columns="2"
value="#{guestPreferences.menuMode}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)"
>
<f:selectItem
itemLabel="Static"
itemValue="layout-static layout-static-active"
/>
<f:selectItem itemLabel="Overlay" itemValue="layout-overlay" /> <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
<f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" /> <f:selectItem
itemLabel="Horizontal"
itemValue="layout-horizontal"
/>
<p:ajax update="menumodes-panel" /> <p:ajax update="menumodes-panel" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="menuthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Theme</span> <span class="section-name">Menu Theme</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')" > <p:selectOneRadio
<f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> layout="responsive"
<f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> columns="3"
<f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> value="#{guestPreferences.menuTheme}"
<p:ajax update="logolink menuthemes-panel"/> onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"
>
<f:selectItem
itemLabel="Light"
itemValue="light"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dark"
itemValue="dark"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dim"
itemValue="dim"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<p:ajax update="logolink menuthemes-panel" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="topbarthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Topbar Mode</span> <span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')" > <p:selectOneRadio
<f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> layout="responsive"
<f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> columns="3"
<f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> value="#{guestPreferences.topbarTheme}"
<p:ajax update="logolink config-form"/> onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"
>
<f:selectItem
itemLabel="Light"
itemValue="light"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dark"
itemValue="dark"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dim"
itemValue="dim"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<p:ajax update="logolink config-form" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="outlined-panel" styleClass="layout-config-section options"> <p:outputPanel
id="outlined-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Form Type</span> <span class="section-name">Form Type</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}" <p:selectOneRadio
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"> layout="responsive"
columns="2"
value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
>
<f:selectItem itemLabel="Outlined" itemValue="outlined" /> <f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" /> <f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax /> <p:ajax />
@ -73,26 +151,50 @@
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="orientation-panel" styleClass="layout-config-section dark"> <p:outputPanel
id="orientation-panel"
styleClass="layout-config-section dark"
>
<span class="section-name">RTL Mode</span> <span class="section-name">RTL Mode</span>
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"> <p:inputSwitch
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" /> id="layout-switch-2"
value="#{guestPreferences.orientationRTL}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
>
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form"
/>
</p:inputSwitch> </p:inputSwitch>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors"> <p:outputPanel
id="componentthemes-panel"
styleClass="layout-config-section colors"
>
<span class="section-name">Component Colors</span> <span class="section-name">Component Colors</span>
<div class="grid layout-config-colors"> <div class="grid layout-config-colors">
<ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme"> <ui:repeat
value="#{guestPreferences.componentThemes}"
var="componentTheme"
>
<div class="col col-fixed"> <div class="col col-fixed">
<p:commandLink styleClass="layout-config-option" <p:commandLink
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this" styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
process="@this"
update=":config-form" update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"> oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
<span class="layout-config-option-color" >
style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span> <span
<ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}"> class="layout-config-option-color"
style="background-color: #{componentTheme.color}"
title="#{componentTheme.name}"
></span>
<ui:fragment
rendered="#{componentTheme.file eq guestPreferences.componentTheme}"
>
<span class="layout-config-option-check-mask"> <span class="layout-config-option-check-mask">
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</span> </span>
@ -102,7 +204,6 @@
</ui:repeat> </ui:repeat>
</div> </div>
</p:outputPanel> </p:outputPanel>
</h:form> </h:form>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
xmlns:f="http://java.sun.com/jsf/core" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" xmlns:p="http://primefaces.org/ui"
> >
<h:head> <h:head>
<f:facet name="first"> <f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -175,7 +175,6 @@
</h:form> </h:form>
</div> </div>
</div> </div>
</div>
<div class="layout-mask modal-in"></div> <div class="layout-mask modal-in"></div>
</div> </div>

Binary file not shown.

View File

@ -1,5 +1,5 @@
:root { :root {
--content-alt-bg-color:#E8F1F8; --content-alt-bg-color:#ffffff;
} }
.order-badge { .order-badge {

View File

@ -1,5 +1,5 @@
:root { :root {
--content-alt-bg-color: #e8f1f8; --content-alt-bg-color: #ffffff;
} }
/* din-next-ultra-light - latin */ /* din-next-ultra-light - latin */
@ -6574,7 +6574,7 @@ body {
height: 100%; height: 100%;
} }
body.main-body { body.main-body {
background: linear-gradient(99deg, #f6f9fe 0%, #e8f1f8 100%); background: #ffffff;
} }
body a { body a {
color: #2c84d8; color: #2c84d8;

View File

@ -4,7 +4,7 @@ html {
} }
body { body {
font-family: 'Open Sans'; font-family: 'DIN Next';
font-size: $fontSize; font-size: $fontSize;
color: $textColor; color: $textColor;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

View File

@ -38,7 +38,7 @@ mark {
background: #FFF8E1; background: #FFF8E1;
padding: .25rem .4rem; padding: .25rem .4rem;
border-radius: $borderRadius; border-radius: $borderRadius;
font-family: 'Open Sans'; font-family: 'DIN Next';
} }
blockquote { blockquote {

View File

@ -1,6 +1,6 @@
//general //general
$fontSize:14px !default; $fontSize:14px !default;
$fontFamily: 'Open Sans' !default; $fontFamily: 'DIN Next' !default;
$mobileBreakpoint:991px !default; $mobileBreakpoint:991px !default;
$borderRadius:5px !default; $borderRadius:5px !default;
$animationDuration:.2s !default; $animationDuration:.2s !default;

View File

@ -3,7 +3,7 @@ $textColor:#515C66 !default;
$textSecondaryColor:#657380 !default; $textSecondaryColor:#657380 !default;
$contentBgColor:#FDFEFF !default; $contentBgColor:#FDFEFF !default;
$contentAltBgColor:#E8F1F8 !default; $contentAltBgColor:#ffffff !default;
$dividerColor: #E8F1F8 !default; $dividerColor: #E8F1F8 !default;
$menuTooltipBgColor:#1c202c !default; $menuTooltipBgColor:#1c202c !default;

View File

@ -29,7 +29,7 @@ $hoverBg:rgba(#4E565F,.7) !default;
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade000 !default; $textColor:$shade000 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -29,7 +29,7 @@ $hoverBg: rgba(#495771,.7) !default;
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade000 !default; $textColor:$shade000 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -27,7 +27,7 @@ $shade900:#252F44 !default; //unused
//global //global
$fontSize:1rem !default; $fontSize:1rem !default;
$fontFamily:'Open Sans' !default; $fontFamily:'DIN Next' !default;
$textColor:$shade700 !default; $textColor:$shade700 !default;
$transitionDuration:.2s !default; $transitionDuration:.2s !default;
$transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default; $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

View File

@ -1,71 +1,149 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" <ui:composition
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"> xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<div id="layout-config" class="layout-config"> <div id="layout-config" class="layout-config">
<div class="layout-config-content"> <div class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button"> <a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog"/> <i class="pi pi-cog" />
</a> </a>
<h:form id="config-form" styleClass="layout-config-form"> <h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header"> <div class="layout-config-header">
<h5>Theme Customization</h5> <h5>Theme Customization</h5>
<span>Poseidon offers different themes for layout, topbar, menu etc.</span> <span
>Poseidon offers different themes for layout, topbar, menu
etc.</span
>
</div> </div>
<p:outputPanel id="lightdark-panel" styleClass="layout-config-section options"> <p:outputPanel
id="lightdark-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Layout Mode</span> <span class="section-name">Layout Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)" > <p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.darkMode}"
onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"
>
<f:selectItem itemLabel="Light" itemValue="light" /> <f:selectItem itemLabel="Light" itemValue="light" />
<f:selectItem itemLabel="Dark" itemValue="dark" /> <f:selectItem itemLabel="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" /> <f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/> <p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form logolink"
/>
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="menumodes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="menumodes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Mode</span> <span class="section-name">Menu Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" > <p:selectOneRadio
<f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" /> layout="responsive"
columns="2"
value="#{guestPreferences.menuMode}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)"
>
<f:selectItem
itemLabel="Static"
itemValue="layout-static layout-static-active"
/>
<f:selectItem itemLabel="Overlay" itemValue="layout-overlay" /> <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
<f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" /> <f:selectItem
itemLabel="Horizontal"
itemValue="layout-horizontal"
/>
<p:ajax update="menumodes-panel" /> <p:ajax update="menumodes-panel" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="menuthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Theme</span> <span class="section-name">Menu Theme</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')" > <p:selectOneRadio
<f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> layout="responsive"
<f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> columns="3"
<f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> value="#{guestPreferences.menuTheme}"
<p:ajax update="logolink menuthemes-panel"/> onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"
>
<f:selectItem
itemLabel="Light"
itemValue="light"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dark"
itemValue="dark"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dim"
itemValue="dim"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<p:ajax update="logolink menuthemes-panel" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options"> <p:outputPanel
id="topbarthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Topbar Mode</span> <span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')" > <p:selectOneRadio
<f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> layout="responsive"
<f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> columns="3"
<f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" /> value="#{guestPreferences.topbarTheme}"
<p:ajax update="logolink config-form"/> onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"
>
<f:selectItem
itemLabel="Light"
itemValue="light"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dark"
itemValue="dark"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<f:selectItem
itemLabel="Dim"
itemValue="dim"
itemDisabled="#{guestPreferences.darkMode != 'light'}"
/>
<p:ajax update="logolink config-form" />
</p:selectOneRadio> </p:selectOneRadio>
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="outlined-panel" styleClass="layout-config-section options"> <p:outputPanel
id="outlined-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Form Type</span> <span class="section-name">Form Type</span>
<div class="grid layout-config-options"> <div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}" <p:selectOneRadio
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"> layout="responsive"
columns="2"
value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
>
<f:selectItem itemLabel="Outlined" itemValue="outlined" /> <f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" /> <f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax /> <p:ajax />
@ -73,26 +151,50 @@
</div> </div>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="orientation-panel" styleClass="layout-config-section dark"> <p:outputPanel
id="orientation-panel"
styleClass="layout-config-section dark"
>
<span class="section-name">RTL Mode</span> <span class="section-name">RTL Mode</span>
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"> <p:inputSwitch
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" /> id="layout-switch-2"
value="#{guestPreferences.orientationRTL}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
>
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form"
/>
</p:inputSwitch> </p:inputSwitch>
</p:outputPanel> </p:outputPanel>
<p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors"> <p:outputPanel
id="componentthemes-panel"
styleClass="layout-config-section colors"
>
<span class="section-name">Component Colors</span> <span class="section-name">Component Colors</span>
<div class="grid layout-config-colors"> <div class="grid layout-config-colors">
<ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme"> <ui:repeat
value="#{guestPreferences.componentThemes}"
var="componentTheme"
>
<div class="col col-fixed"> <div class="col col-fixed">
<p:commandLink styleClass="layout-config-option" <p:commandLink
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this" styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
process="@this"
update=":config-form" update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"> oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
<span class="layout-config-option-color" >
style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span> <span
<ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}"> class="layout-config-option-color"
style="background-color: #{componentTheme.color}"
title="#{componentTheme.name}"
></span>
<ui:fragment
rendered="#{componentTheme.file eq guestPreferences.componentTheme}"
>
<span class="layout-config-option-check-mask"> <span class="layout-config-option-check-mask">
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</span> </span>
@ -102,7 +204,6 @@
</ui:repeat> </ui:repeat>
</div> </div>
</p:outputPanel> </p:outputPanel>
</h:form> </h:form>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
xmlns:f="http://java.sun.com/jsf/core" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" xmlns:p="http://primefaces.org/ui"
> >
<h:head> <h:head>
<f:facet name="first"> <f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -175,7 +175,6 @@
</h:form> </h:form>
</div> </div>
</div> </div>
</div>
<div class="layout-mask modal-in"></div> <div class="layout-mask modal-in"></div>
</div> </div>