feat: organizando estilos da main
parent
2df7cfc81e
commit
8bd528c3c6
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--content-alt-bg-color:#E8F1F8;
|
||||
--content-alt-bg-color:#ffffff;
|
||||
}
|
||||
|
||||
.order-badge {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -4,7 +4,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'DIN Next';
|
||||
font-size: $fontSize;
|
||||
color: $textColor;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
@ -38,7 +38,7 @@ mark {
|
|||
background: #FFF8E1;
|
||||
padding: .25rem .4rem;
|
||||
border-radius: $borderRadius;
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'DIN Next';
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<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">
|
||||
|
||||
<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">
|
||||
|
@ -10,62 +13,137 @@
|
|||
<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>
|
||||
<span
|
||||
>Poseidon offers different themes for layout, topbar, menu
|
||||
etc.</span
|
||||
>
|
||||
</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>
|
||||
<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="Dark" itemValue="dark" />
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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" />
|
||||
<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" />
|
||||
<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">
|
||||
<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: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">
|
||||
<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: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">
|
||||
<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)">
|
||||
<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 />
|
||||
|
@ -73,26 +151,50 @@
|
|||
</div>
|
||||
</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>
|
||||
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
|
||||
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
|
||||
<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">
|
||||
<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">
|
||||
<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"
|
||||
<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}">
|
||||
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>
|
||||
|
@ -102,7 +204,6 @@
|
|||
</ui:repeat>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -175,7 +175,6 @@
|
|||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mask modal-in"></div>
|
||||
</div>
|
||||
|
||||
|
|
Binary file not shown.
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--content-alt-bg-color:#E8F1F8;
|
||||
--content-alt-bg-color:#ffffff;
|
||||
}
|
||||
|
||||
.order-badge {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -4,7 +4,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'DIN Next';
|
||||
font-size: $fontSize;
|
||||
color: $textColor;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
@ -38,7 +38,7 @@ mark {
|
|||
background: #FFF8E1;
|
||||
padding: .25rem .4rem;
|
||||
border-radius: $borderRadius;
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'DIN Next';
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<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">
|
||||
|
||||
<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">
|
||||
|
@ -10,62 +13,137 @@
|
|||
<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>
|
||||
<span
|
||||
>Poseidon offers different themes for layout, topbar, menu
|
||||
etc.</span
|
||||
>
|
||||
</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>
|
||||
<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="Dark" itemValue="dark" />
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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" />
|
||||
<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" />
|
||||
<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">
|
||||
<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: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">
|
||||
<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: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">
|
||||
<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)">
|
||||
<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 />
|
||||
|
@ -73,26 +151,50 @@
|
|||
</div>
|
||||
</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>
|
||||
<p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
|
||||
<p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
|
||||
<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">
|
||||
<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">
|
||||
<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"
|
||||
<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}">
|
||||
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>
|
||||
|
@ -102,7 +204,6 @@
|
|||
</ui:repeat>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -175,7 +175,6 @@
|
|||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mask modal-in"></div>
|
||||
</div>
|
||||
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue