agtemplateweb/target/agtemplate-1.0.0/template/config.xhtml

<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>
  </div>
</ui:composition>