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 {
--content-alt-bg-color:#E8F1F8;
--content-alt-bg-color:#ffffff;
}
.order-badge {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,109 +1,210 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 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 class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog"/>
</a>
<h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header">
<h5>Theme Customization</h5>
<span>Poseidon offers different themes for layout, topbar, menu etc.</span>
</div>
<p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
<span class="section-name">Layout Mode</span>
<div class="grid layout-config-options">
<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="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
<span class="section-name">Menu Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio 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="Horizontal" itemValue="layout-horizontal" />
<p:ajax update="menumodes-panel" />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
<span class="section-name">Menu Theme</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" 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>
</div>
</p:outputPanel>
<p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
<span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" 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>
</div>
</p:outputPanel>
<p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
<span class="section-name">Form Type</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
<f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
<span class="section-name">RTL Mode</span>
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
</p:inputSwitch>
</p:outputPanel>
<p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
<span class="section-name">Component Colors</span>
<div class="grid layout-config-colors">
<ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
<div class="col col-fixed">
<p:commandLink styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
<span 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">
<i class="pi pi-check"></i>
</span>
</ui:fragment>
</p:commandLink>
</div>
</ui:repeat>
</div>
</p:outputPanel>
</h:form>
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
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 class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog" />
</a>
<h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header">
<h5>Theme Customization</h5>
<span
>Poseidon offers different themes for layout, topbar, menu
etc.</span
>
</div>
<p:outputPanel
id="lightdark-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Layout Mode</span>
<div class="grid layout-config-options">
<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="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form logolink"
/>
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="menumodes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio
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="Horizontal"
itemValue="layout-horizontal"
/>
<p:ajax update="menumodes-panel" />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="menuthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Theme</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.menuTheme}"
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>
</div>
</p:outputPanel>
<p:outputPanel
id="topbarthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.topbarTheme}"
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>
</div>
</p:outputPanel>
<p:outputPanel
id="outlined-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Form Type</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="2"
value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
>
<f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="orientation-panel"
styleClass="layout-config-section dark"
>
<span class="section-name">RTL Mode</span>
<p:inputSwitch
id="layout-switch-2"
value="#{guestPreferences.orientationRTL}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
>
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form"
/>
</p:inputSwitch>
</p:outputPanel>
<p:outputPanel
id="componentthemes-panel"
styleClass="layout-config-section colors"
>
<span class="section-name">Component Colors</span>
<div class="grid layout-config-colors">
<ui:repeat
value="#{guestPreferences.componentThemes}"
var="componentTheme"
>
<div class="col col-fixed">
<p:commandLink
styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
process="@this"
update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
>
<span
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">
<i class="pi pi-check"></i>
</span>
</ui:fragment>
</p:commandLink>
</div>
</ui:repeat>
</div>
</p:outputPanel>
</h:form>
</div>
</ui:composition>
</div>
</ui:composition>

View File

@ -5,7 +5,7 @@
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -13,7 +13,7 @@
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>
@ -94,7 +94,7 @@
<h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
<div
class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}"
>
>
<ui:include src="./topbar.xhtml" />
<ui:include src="./menutemplate.xhtml" />
@ -125,7 +125,7 @@
id="messages"
showSummary="true"
closable="true"
/>
/>
<h:panelGroup layout="block" id="panel_formulario">
<ui:insert name="FORMULARIO"></ui:insert>
</h:panelGroup>
@ -139,20 +139,20 @@
message="Deseja excluir?"
header="Confirmar"
severity="warn"
>
>
<p:commandButton
value="Sim"
icon="pi pi-check"
process="@this"
oncomplete="PF('deleteDialog').hide()"
/>
/>
<p:commandButton
value="Não"
type="button"
styleClass="ui-button-secondary"
icon="pi pi-times"
onclick="PF('deleteDialog').hide()"
/>
/>
</p:confirmDialog>
<p:confirmDialog global="true" showEffect="fade" width="300">
@ -161,13 +161,13 @@
type="button"
styleClass="ui-confirmdialog-yes"
icon="pi pi-check"
/>
/>
<p:commandButton
value="Não"
type="button"
styleClass="ui-confirmdialog-no ui-button-secondary"
icon="pi pi-times"
/>
/>
</p:confirmDialog>
</div>
</div>
@ -175,8 +175,7 @@
</h:form>
</div>
</div>
</div>
<div class="layout-mask modal-in"></div>
<div class="layout-mask modal-in"></div>
</div>
<p:ajaxStatus styleClass="layout-ajax-loader">
@ -184,7 +183,7 @@
<i
class="pi pi-spin pi-spinner layout-ajax-loader-icon"
aria-hidden="true"
/>
/>
</f:facet>
<f:facet name="complete">
@ -195,16 +194,16 @@
<h:outputStylesheet
name="css/primeflex.min.css"
library="poseidon-layout"
/>
/>
<h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
<h:outputStylesheet
name="css/demo-#{guestPreferences.darkMode}.css"
library="demo"
/>
/>
<h:outputStylesheet
name="css/layout-#{guestPreferences.darkMode}.css"
library="poseidon-layout"
/>
/>
<h:outputStylesheet name="css/framework.css" library="framework" />
<p:log id="log" rendered="false" />
</h:body>

Binary file not shown.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,109 +1,210 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 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 class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog"/>
</a>
<h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header">
<h5>Theme Customization</h5>
<span>Poseidon offers different themes for layout, topbar, menu etc.</span>
</div>
<p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
<span class="section-name">Layout Mode</span>
<div class="grid layout-config-options">
<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="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
<span class="section-name">Menu Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio 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="Horizontal" itemValue="layout-horizontal" />
<p:ajax update="menumodes-panel" />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
<span class="section-name">Menu Theme</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" 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>
</div>
</p:outputPanel>
<p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
<span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" 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>
</div>
</p:outputPanel>
<p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
<span class="section-name">Form Type</span>
<div class="grid layout-config-options">
<p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
<f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
<span class="section-name">RTL Mode</span>
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
</p:inputSwitch>
</p:outputPanel>
<p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
<span class="section-name">Component Colors</span>
<div class="grid layout-config-colors">
<ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
<div class="col col-fixed">
<p:commandLink styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
<span 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">
<i class="pi pi-check"></i>
</span>
</ui:fragment>
</p:commandLink>
</div>
</ui:repeat>
</div>
</p:outputPanel>
</h:form>
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
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 class="layout-config-content">
<a href="#" id="layout-config-button" class="layout-config-button">
<i class="pi pi-cog" />
</a>
<h:form id="config-form" styleClass="layout-config-form">
<div class="layout-config-header">
<h5>Theme Customization</h5>
<span
>Poseidon offers different themes for layout, topbar, menu
etc.</span
>
</div>
<p:outputPanel
id="lightdark-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Layout Mode</span>
<div class="grid layout-config-options">
<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="Dark" itemValue="dark" />
<f:selectItem itemLabel="Dim" itemValue="dim" />
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form logolink"
/>
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="menumodes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio
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="Horizontal"
itemValue="layout-horizontal"
/>
<p:ajax update="menumodes-panel" />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="menuthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Menu Theme</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.menuTheme}"
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>
</div>
</p:outputPanel>
<p:outputPanel
id="topbarthemes-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Topbar Mode</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="3"
value="#{guestPreferences.topbarTheme}"
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>
</div>
</p:outputPanel>
<p:outputPanel
id="outlined-panel"
styleClass="layout-config-section options"
>
<span class="section-name">Form Type</span>
<div class="grid layout-config-options">
<p:selectOneRadio
layout="responsive"
columns="2"
value="#{guestPreferences.inputStyle}"
onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
>
<f:selectItem itemLabel="Outlined" itemValue="outlined" />
<f:selectItem itemLabel="Filled" itemValue="filled" />
<p:ajax />
</p:selectOneRadio>
</div>
</p:outputPanel>
<p:outputPanel
id="orientation-panel"
styleClass="layout-config-section dark"
>
<span class="section-name">RTL Mode</span>
<p:inputSwitch
id="layout-switch-2"
value="#{guestPreferences.orientationRTL}"
onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
>
<p:ajax
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
update="config-form"
/>
</p:inputSwitch>
</p:outputPanel>
<p:outputPanel
id="componentthemes-panel"
styleClass="layout-config-section colors"
>
<span class="section-name">Component Colors</span>
<div class="grid layout-config-colors">
<ui:repeat
value="#{guestPreferences.componentThemes}"
var="componentTheme"
>
<div class="col col-fixed">
<p:commandLink
styleClass="layout-config-option"
actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
process="@this"
update=":config-form"
onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
>
<span
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">
<i class="pi pi-check"></i>
</span>
</ui:fragment>
</p:commandLink>
</div>
</ui:repeat>
</div>
</p:outputPanel>
</h:form>
</div>
</ui:composition>
</div>
</ui:composition>

View File

@ -5,7 +5,7 @@
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -13,7 +13,7 @@
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>
@ -94,7 +94,7 @@
<h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
<div
class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}"
>
>
<ui:include src="./topbar.xhtml" />
<ui:include src="./menutemplate.xhtml" />
@ -125,7 +125,7 @@
id="messages"
showSummary="true"
closable="true"
/>
/>
<h:panelGroup layout="block" id="panel_formulario">
<ui:insert name="FORMULARIO"></ui:insert>
</h:panelGroup>
@ -139,20 +139,20 @@
message="Deseja excluir?"
header="Confirmar"
severity="warn"
>
>
<p:commandButton
value="Sim"
icon="pi pi-check"
process="@this"
oncomplete="PF('deleteDialog').hide()"
/>
/>
<p:commandButton
value="Não"
type="button"
styleClass="ui-button-secondary"
icon="pi pi-times"
onclick="PF('deleteDialog').hide()"
/>
/>
</p:confirmDialog>
<p:confirmDialog global="true" showEffect="fade" width="300">
@ -161,13 +161,13 @@
type="button"
styleClass="ui-confirmdialog-yes"
icon="pi pi-check"
/>
/>
<p:commandButton
value="Não"
type="button"
styleClass="ui-confirmdialog-no ui-button-secondary"
icon="pi pi-times"
/>
/>
</p:confirmDialog>
</div>
</div>
@ -175,8 +175,7 @@
</h:form>
</div>
</div>
</div>
<div class="layout-mask modal-in"></div>
<div class="layout-mask modal-in"></div>
</div>
<p:ajaxStatus styleClass="layout-ajax-loader">
@ -184,7 +183,7 @@
<i
class="pi pi-spin pi-spinner layout-ajax-loader-icon"
aria-hidden="true"
/>
/>
</f:facet>
<f:facet name="complete">
@ -195,16 +194,16 @@
<h:outputStylesheet
name="css/primeflex.min.css"
library="poseidon-layout"
/>
/>
<h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
<h:outputStylesheet
name="css/demo-#{guestPreferences.darkMode}.css"
library="demo"
/>
/>
<h:outputStylesheet
name="css/layout-#{guestPreferences.darkMode}.css"
library="poseidon-layout"
/>
/>
<h:outputStylesheet name="css/framework.css" library="framework" />
<p:log id="log" rendered="false" />
</h:body>