-
-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
190 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 57 additions & 16 deletions
73
src/main/resources/META-INF/resources/template/topbar.xhtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,80 @@ | ||
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="jakarta.faces.html" xmlns:f="jakarta.faces.core" | ||
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="jakarta.faces.html" | ||
xmlns:ui="jakarta.faces.facelets" xmlns:p="http://primefaces.org/ui"> | ||
|
||
<div class="layout-topbar"> | ||
<a class="menu-button" tabindex="0"> | ||
<i class="pi pi-bars"></i> | ||
</a> | ||
<h:link styleClass="logo" outcome="/index.xhtml"> | ||
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" /> | ||
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" height="33" width="180" | ||
alt="Quarkus Faces"/> | ||
</h:link> | ||
<p:outputPanel id="app-theme-logo" class="app-theme"> | ||
<p:graphicImage id="app-theme-image" name="images/themes/#{app.themeImage}" library="showcase" /> | ||
<p:tooltip for="app-theme-logo" value="#{app.theme}" position="bottom" showDelay="0" /> | ||
<p:graphicImage id="app-theme-image" name="images/themes/#{app.themeImage}" library="showcase"/> | ||
<p:tooltip for="app-theme-logo" value="#{app.theme}" position="bottom" showDelay="0"/> | ||
</p:outputPanel> | ||
|
||
<h:form styleClass="topbar-form"> | ||
<ul class="topbar-menu"> | ||
<li class="topbar-submenu"> | ||
<a tabindex="0"><i class="pi pi-palette mr-2"></i>Themes</a> | ||
<ul class="connected-overlay-in"> | ||
|
||
<li class="topbar-submenu-header">PRIMEONE</li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('saga', false)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/saga.png" alt="Saga"/><span>Saga</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('vela', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/vela.png" alt="Vela"/><span>Vela</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('arya', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/arya.png" alt="Arya"/><span>Arya</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('saga', false)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/saga.png" alt="Saga"/><span>Saga</span></p:commandLink> | ||
</li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('vela', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/vela.png" alt="Vela"/><span>Vela</span></p:commandLink> | ||
</li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('arya', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/arya.png" alt="Arya"/><span>Arya</span></p:commandLink> | ||
</li> | ||
<li class="topbar-submenu-header">LEGACY</li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-light', false)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova.png" alt="Nova"/><span>Nova</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-dark', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova-alt.png" alt="Nova Alt"/><span>Nova Alt</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-colored', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova-accent.png" alt="Nova Accent"/><span>Nova Accent</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-amber', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-amber.png" alt="Luna Amber"/><span>Luna Amber</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-blue', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-blue.png" alt="Luna Blue"/><span>Luna Blue</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-green', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-green.png" alt="Luna Green"/><span>Luna Green</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-pink', true)}" oncomplete="window.location.reload();" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-pink.png" alt="Luna Pink"/><span>Luna Pink</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-light', false)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/nova.png" alt="Nova"/><span>Nova</span></p:commandLink> | ||
</li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-dark', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/nova-alt.png" | ||
alt="Nova Alt"/><span>Nova Alt</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('nova-colored', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/nova-accent.png" | ||
alt="Nova Accent"/><span>Nova Accent</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-amber', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/luna-amber.png" | ||
alt="Luna Amber"/><span>Luna Amber</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-blue', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/luna-blue.png" | ||
alt="Luna Blue"/><span>Luna Blue</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-green', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/luna-green.png" | ||
alt="Luna Green"/><span>Luna Green</span></p:commandLink></li> | ||
<li><p:commandLink actionListener="#{app.changeTheme('luna-pink', true)}" | ||
oncomplete="window.location.reload();" | ||
update=":app-theme-logo"><h:graphicImage | ||
name="showcase/images/themes/luna-pink.png" | ||
alt="Luna Pink"/><span>Luna Pink</span></p:commandLink></li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</h:form> | ||
</div> | ||
</ui:composition> | ||
</ui:composition> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,53 @@ | ||
<ui:composition xmlns="http://www.w3.org/1999/xhtml" | ||
xmlns:ui="jakarta.faces.facelets" | ||
xmlns:h="http://xmlns.jcp.org/jsf/html" | ||
xmlns:p="http://primefaces.org/ui" | ||
template="/template/template.xhtml"> | ||
|
||
<ui:define name="head"> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> | ||
<!-- Must load plugin JS (here using OmniFaces CDN handler) --> | ||
<h:outputScript library="cdn" name="chartjs-plugin-datalabels.js" target="body"/> | ||
<script> | ||
function chartExtender() { | ||
var options = { | ||
plugins: [ChartDataLabels], | ||
options: { | ||
plugins: { | ||
// Change options for ALL labels of THIS CHART | ||
datalabels: { | ||
color: 'HotPink' | ||
} | ||
} | ||
}, | ||
data: { | ||
datasets: [{ | ||
// Change options only for labels of THIS DATASET | ||
datalabels: { | ||
color: 'Indigo' | ||
} | ||
}] | ||
plugins: [ChartDataLabels], | ||
options: { | ||
plugins: { | ||
// Change options for ALL labels of THIS CHART | ||
datalabels: { | ||
color: 'HotPink' | ||
} | ||
} | ||
}; | ||
}, | ||
data: { | ||
datasets: [{ | ||
// Change options only for labels of THIS DATASET | ||
datalabels: { | ||
color: 'Indigo' | ||
} | ||
}] | ||
} | ||
}; | ||
|
||
//merge all options into the main chart options | ||
$.extend(true, this.cfg.config, options); | ||
//merge all options into the main chart options | ||
$.extend(true, this.cfg.config, options); | ||
} | ||
</script> | ||
</ui:define> | ||
|
||
<ui:define name="title"> | ||
Charts <span class="subitem">Pie</span> | ||
</ui:define> | ||
|
||
<ui:define name="description"> | ||
PieChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model. | ||
Using the <strong>extender</strong> functionality to add Data Labels to the pie chart with the Data Labels plugin. | ||
PieChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" | ||
target="_blank" rel="noopener noreferrer">XDEV</a> model. | ||
Using the | ||
<strong>extender</strong> functionality to add Data Labels to the pie chart with the Data Labels plugin. | ||
</ui:define> | ||
|
||
<ui:param name="documentationLink" value="/components/chart" /> | ||
<ui:param name="widgetLink" value="Chart" /> | ||
<ui:param name="documentationLink" value="/components/chart"/> | ||
<ui:param name="widgetLink" value="Chart"/> | ||
|
||
<ui:define name="implementation"> | ||
<div class="grid"> | ||
|
@@ -55,4 +59,4 @@ | |
</div> | ||
</ui:define> | ||
|
||
</ui:composition> | ||
</ui:composition> |
Oops, something went wrong.