-
-
- Composants utilitaires
-
+
+
+
+
fr:fieldNumber
+
Champ numรฉrique avec symbole et dรฉcimales
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Barre de progression:
-
-
-
-
-
Divider avec texte:
-
- OU
-
+
+
-
-
-
-
- Composants de layout
-
+
+
+
+
fr:fieldCheckbox
+
Case ร cocher avec label
+
+
+
+
+
+
+
+
+
+
+
fr:fieldSwitch
+
Interrupteur ON/OFF moderne
+
+
+
+
+
+
+
+
+
fr:fieldMultiSelect
+
Sรฉlection multiple avec chips
+
+
+
+
+
+
+
+
+
+
+
fr:fieldRadio
+
Boutons radio pour sรฉlection unique
+
+
+
+
+
+
+
+
+
+
+
+
+
fr:fieldToggle
+
Bouton bascule avec labels personnalisรฉs
+
+
+
+
+
+
+
+
+
fr:fieldChips
+
Saisie de tags/mots-clรฉs
+
+
+
+
+
+
+
+
+
fr:fieldRating
+
รvaluation par รฉtoiles
+
+
+
+
+
+
+
+
+
fr:fieldColor
+
Sรฉlecteur de couleur
+
+
+
+
+
+
+
+
+
fr:fieldMask
+
Champ avec masque de saisie
+
+
+
+
+
+
+
+
+
fr:fieldAutoComplete
+
Autocomplรฉtion avec suggestions
+
+
+
+
+
+
+
+
+
fr:fieldSpinner
+
Spinner numรฉrique avec min/max
+
+
+
+
+
+
+
+
+
fr:fieldSlider
+
Slider pour sรฉlection de valeur
+
+
+
+
+
+
+
+
+
fr:fieldFileUpload
+
Upload de fichiers avec contraintes
+
+
+
Formats acceptรฉs: PDF, DOC, DOCX, TXT (max 3 fichiers)
+
+
+
+
+
+
+
+
Composants d'Action
+
+
+
+
+
Buttons - Variations et Severitรฉs
+
Dรฉmonstration des composants fr:button, fr:commandButton, fr:linkButton et fr:splitButton avec diffรฉrentes severitรฉs
-
- Contenu de la carte avec le composant fr:card.
-
-
+
fr:button (Navigation)
+
+
+
+
+
+
-
- Contenu du panneau avec le composant fr:panel.
- Ce panneau peut รชtre repliรฉ en cliquant sur l'icรดne.
-
+
fr:commandButton (Action)
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Rรฉduction de code
-
-
- Ce formulaire utilise 7 composants fr:field*.
-
-
-
-
-
Avec extension:
-
+
+
fr:linkButton (Lien stylisรฉ)
+
+
+
+
-
-
Sans extension:
-
+
+
+
fr:splitButton (Menu dรฉroulant)
+
+
+
-
-
- Gain:
- -80%
-
-
-
-
-
-
-
-
- Composants disponibles (43)
-
-
-
-
-
- fr:fieldInput
- fr:fieldTextarea
- fr:fieldPassword
- fr:fieldNumber
- fr:fieldSelect
- fr:fieldMultiSelect
- fr:fieldCalendar
- fr:fieldRadio
- fr:fieldCheckbox
- fr:fieldSwitch
- fr:fieldToggle
- fr:fieldChips
- fr:fieldRating
- fr:fieldColor
- fr:fieldFileUpload
- fr:fieldAutoComplete
- fr:fieldMask
- fr:fieldSlider
- fr:fieldSpinner
-
-
-
-
- fr:actionDialog
- fr:formDialog
- fr:card
- fr:panel
-
-
-
-
- fr:dataTable
- fr:dataView
- fr:treeTable
-
-
-
-
- fr:breadcrumb
- fr:steps
- fr:tabView
-
-
-
-
- fr:button
- fr:commandButton
- fr:linkButton
- fr:splitButton
-
-
-
-
- fr:message
- fr:growl
- fr:inplace
-
-
-
-
- fr:themeSelector
- fr:spacer
- fr:divider
- fr:badge
- fr:avatar
- fr:tag
- fr:progressBar
-
-
-
-
-
-
-
-
-
- Documentation
-
-
-
-
-
-
-
- Ce dialog utilise le composant fr:actionDialog avec des champs
- fr:field* ร l'intรฉrieur.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ce dialog utilise le composant fr:formDialog qui inclut
- automatiquement un formulaire avec validation.
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
Composants de Layout
+
+
+
+
+
+ Contenu de la carte. Le composant fr:card permet d'encapsuler du contenu dans un container รฉlรฉgant avec header optionnel.
+
+
+
+
+
+
+
+ Contenu du panneau. Le composant fr:panel supporte le pliage/dรฉpliage et la fermeture.
+ Cliquez sur l'icรดne pour plier/dรฉplier ce panneau.
+
+
+
+
+
+
+
Dialogs - fr:actionDialog et fr:formDialog
+
Dialogs modaux standardisรฉs avec boutons d'action
+
+
+
+
+
+
+
+
+
+
+ Ce dialog utilise le composant fr:actionDialog avec des champs fr:field* ร l'intรฉrieur.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Le composant fr:formDialog intรจgre un formulaire avec validation automatique.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Composants de Navigation
+
+
+
+
+
+
fr:breadcrumb - Fil d'Ariane
+
Navigation hiรฉrarchique
+
+
+
+
+
+
+
+
+
fr:steps - Indicateur d'รฉtapes
+
Affichage de la progression dans un processus multi-รฉtapes
+
+
+
+
+
+
+
+
+
fr:tabView - Onglets
+
Organisation du contenu en onglets
+
+
+
+ Premier onglet avec informations gรฉnรฉrales.
+
+
+
+ Deuxiรจme onglet avec paramรจtres.
+
+
+
+ Troisiรจme onglet avec options avancรฉes.
+
+
+
+
+
+
+
+
+
+
Composants de Donnรฉes
+
+
+
+
+
+
fr:dataTable - Tableau de donnรฉes
+
Tableau avec tri, pagination et sรฉlection
+
+
+
+
+
+
+
+
+
+
+
+
+ #{user.active ? 'ACTIF' : 'INACTIF'}
+
+
+
+
+
+
+ Utilisateur sรฉlectionnรฉ: #{demoBean.selectedUser.nom} (#{demoBean.selectedUser.email})
+
+
+
+
+
+
+
+
+
Composants de Feedback
+
+
+
+
+
+
fr:message - Message d'information
+
Affichage de messages avec diffรฉrents niveaux de sรฉvรฉritรฉ
+
+
+
+
+
+
+
+
+
+
+
fr:growl - Notifications Toast
+
Messages toast temporaires
+
+
+
Les notifications growl s'affichent automatiquement lors des actions.
+
+
+
+
+
+
+
fr:inplace - รdition en place
+
รdition de contenu sans ouvrir de dialog
+
+
+
+
+
+
+
+
+
+
+
+
Composants Utilitaires
+
+
+
+
+
fr:spacer - Espacement
+
Crรฉe un espace vertical entre les รฉlรฉments
+
+
รlรฉment 1
+
+
รlรฉment 2 (espacรฉ de 2rem)
+
+
+
+
+
+
fr:divider - Sรฉparateur
+
Ligne de sรฉparation horizontale ou verticale
+
+
Contenu avant
+
+
Contenu aprรจs
+
+
+
+
+
+
fr:badge - Badge numรฉrique
+
Indicateur numรฉrique ou de statut
+
+
+
+
+
+
+
+
+
+
+
+
fr:avatar - Avatar utilisateur
+
Reprรฉsentation visuelle d'un utilisateur
+
+
+
+
+
+
+
+
+
+
+
+
fr:tag - รtiquette
+
Tag de catรฉgorisation avec couleur
+
+
+
+
+
+
+
+
+
+
+
+
fr:progressBar - Barre de progression
+
Indicateur de progression
+
+
+
+
+
+
+
+
+
+
+
+
Composants Avancรฉs
+
+
+
+
+
Composants Avancรฉs
+
Les composants fr:tree, fr:fieldEditor et fr:chart sont disponibles pour des cas d'usage avancรฉs.
+
+
+ fr:tree - Arbre hiรฉrarchique avec sรฉlection
+ fr:fieldEditor - รditeur WYSIWYG pour contenu riche
+ fr:chart - Graphiques interactifs (bar, line, pie, etc.)
+ fr:treeTable - Table avec structure hiรฉrarchique
+ fr:dataView - Affichage en grille/liste avec templates
+
+
+
+
+
+
+
+
+
+
+
Actions du formulaire
+
+
+
+
+
+
+
-
-
\ No newline at end of file
+
diff --git a/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-common.css b/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-common.css
new file mode 100644
index 0000000..80823b4
--- /dev/null
+++ b/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-common.css
@@ -0,0 +1,122 @@
+/* Common styles for Freya demo components */
+
+.order-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+}
+
+.order-badge.order-delivered {
+ background: #ACEBB4;
+ color: #348861;
+}
+
+.order-badge.order-cancelled {
+ background: #FABD9A;
+ color: #AD342B;
+}
+
+.order-badge.order-pending {
+ background: #F8D895;
+ color: #A76927;
+}
+
+.order-badge.order-returned {
+ background: #EFB8E5;
+ color: #833F91;
+}
+
+.product-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+ text-align: center;
+}
+
+.product-badge.status-instock {
+ background: #ACEBB4;
+ color: #348861;
+}
+
+.product-badge.status-outofstock {
+ background: #FABD9A;
+ color: #AD342B;
+}
+
+.product-badge.status-lowstock {
+ background: #F8D895;
+ color: #A76927;
+}
+
+.customer-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+}
+
+.customer-badge.status-qualified {
+ background: #ACEBB4;
+ color: #348861;
+}
+
+.customer-badge.status-unqualified {
+ background: #FABD9A;
+ color: #AD342B;
+}
+
+.customer-badge.status-negotiation {
+ background: #F8D895;
+ color: #A76927;
+}
+
+.customer-badge.status-new {
+ background: #9BF2F7;
+ color: #2B7AA4;
+}
+
+.customer-badge.status-renewal {
+ background: #EFB8E5;
+ color: #833F91;
+}
+
+.customer-badge.status-proposal {
+ background: #FFD8B2;
+ color: #805B36;
+}
+
+.filter-container .ui-inputtext {
+ width: 400px;
+}
+
+.ui-selection-column {
+ width: 2rem;
+}
+
+@media (max-width: 640px) {
+ .filter-container {
+ width: 100%;
+ margin-top: .5rem;
+ }
+
+ .filter-container .ui-inputtext {
+ width: 100%;
+ }
+
+ .ui-selection-column {
+ width: auto;
+ text-align: center;
+ }
+
+ .ui-selection-column .ui-column-title {
+ display: none !important;
+ }
+}
diff --git a/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-light.css b/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-light.css
new file mode 100644
index 0000000..7576348
--- /dev/null
+++ b/integration-tests/src/main/resources/META-INF/resources/demo/css/demo-light.css
@@ -0,0 +1,734 @@
+.order-badge {
+ border-radius: 2px;
+ padding: 0.25em 0.5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.3px;
+}
+.order-badge.order-delivered {
+ background: #ACEBB4;
+ color: #348861;
+}
+.order-badge.order-cancelled {
+ background: #FABD9A;
+ color: #AD342B;
+}
+.order-badge.order-pending {
+ background: #F8D895;
+ color: #A76927;
+}
+.order-badge.order-returned {
+ background: #EFB8E5;
+ color: #833F91;
+}
+
+.product-badge {
+ border-radius: 2px;
+ padding: 0.25em 0.5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.3px;
+ text-align: center;
+}
+.product-badge.status-instock {
+ background: #ACEBB4;
+ color: #348861;
+}
+.product-badge.status-outofstock {
+ background: #FABD9A;
+ color: #AD342B;
+}
+.product-badge.status-lowstock {
+ background: #F8D895;
+ color: #A76927;
+}
+
+.customer-badge {
+ border-radius: 2px;
+ padding: 0.25em 0.5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.3px;
+}
+.customer-badge.status-qualified {
+ background: #ACEBB4;
+ color: #348861;
+}
+.customer-badge.status-unqualified {
+ background: #FABD9A;
+ color: #AD342B;
+}
+.customer-badge.status-negotiation {
+ background: #F8D895;
+ color: #A76927;
+}
+.customer-badge.status-new {
+ background: #9BF2F7;
+ color: #2B7AA4;
+}
+.customer-badge.status-renewal {
+ background: #EFB8E5;
+ color: #833F91;
+}
+.customer-badge.status-proposal {
+ background: #FFD8B2;
+ color: #805B36;
+}
+
+.filter-container .ui-inputtext {
+ width: 400px;
+}
+
+.ui-selection-column {
+ width: 2rem;
+}
+
+@media (max-width: 640px) {
+ .filter-container {
+ width: 100%;
+ margin-top: 0.5rem;
+ }
+
+ .filter-container .ui-inputtext {
+ width: 100%;
+ }
+
+ .ui-selection-column {
+ width: auto;
+ text-align: center;
+ }
+ .ui-selection-column .ui-column-title {
+ display: none !important;
+ }
+}
+.crud-demo .ui-datatable {
+ margin-top: 1rem;
+}
+.crud-demo .product-image {
+ width: 100px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+.crud-demo .ui-dialog .product-image {
+ width: 250px;
+ margin: 0 auto 2rem auto;
+ display: block;
+}
+.crud-demo .ui-dialog-footer .ui-button {
+ min-width: 6rem;
+}
+.crud-demo .ui-datatable .ui-column-filter {
+ display: none;
+}
+.crud-demo .products-table-header {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.crud-demo .edit-button.ui-button {
+ margin-right: 0.5rem;
+}
+.crud-demo .orders-subtable {
+ padding: 1rem;
+}
+.crud-demo .products-table > .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(2) {
+ width: 2rem;
+}
+.crud-demo .products-table .ui-rating {
+ display: inline-block;
+}
+
+@media (max-width: 640px) {
+ .products-table > .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(2) .ui-column-title,
+.products-table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(2) .ui-column-title {
+ display: none !important;
+ }
+
+ .products-buttonbar {
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ .products-buttonbar > div:last-child {
+ margin-top: 0.5rem;
+ }
+}
+.docs li {
+ line-height: 1.5;
+}
+
+.icons-demo .icons-list {
+ text-align: center;
+ color: rgba(41, 50, 65, 0.8);
+}
+.icons-demo .icons-list i {
+ font-size: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.list-demo .product-name {
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+.list-demo .product-description {
+ margin: 0 0 1rem 0;
+}
+.list-demo .product-category-icon {
+ vertical-align: middle;
+ margin-right: 0.5rem;
+}
+.list-demo .product-category {
+ font-weight: 600;
+ vertical-align: middle;
+}
+.list-demo .product-list-item {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 1rem;
+}
+.list-demo .product-list-item img {
+ width: 150px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ margin-right: 2rem;
+}
+.list-demo .product-list-item .product-list-detail {
+ flex: 1 1 0;
+ -ms-flex: 1 1 0px;
+}
+.list-demo .product-list-item .ui-rating {
+ margin: 0 0 0.5rem 0;
+}
+.list-demo .product-list-item .product-price {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ align-self: flex-end;
+}
+.list-demo .product-list-item .product-list-action {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.list-demo .product-list-item .ui-button {
+ margin-bottom: 0.5rem;
+}
+.list-demo .product-grid-item {
+ border: 1px solid #dee2e6;
+ box-shadow: none;
+}
+.list-demo .product-grid-item .product-grid-item-top,
+.list-demo .product-grid-item .product-grid-item-bottom {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.list-demo .product-grid-item img {
+ width: 75%;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ margin: 2rem 0;
+}
+.list-demo .product-grid-item .product-grid-item-content {
+ text-align: center;
+}
+.list-demo .product-grid-item .product-price {
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+@media screen and (max-width: 576px) {
+ .list-demo .product-list-item {
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+ .list-demo .product-list-item img {
+ width: 75%;
+ margin: 2rem 0;
+ }
+ .list-demo .product-list-item .product-list-detail {
+ text-align: center;
+ }
+ .list-demo .product-list-item .product-price {
+ align-self: center;
+ }
+ .list-demo .product-list-item .product-list-action {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ .list-demo .product-list-item .product-list-action {
+ margin-top: 2rem;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+ }
+}
+.messages-demo .ui-button.ui-widget {
+ min-width: 6rem;
+}
+.messages-demo .field > label {
+ width: 125px;
+}
+
+.misc-demo .ui-button.ui-widget {
+ min-width: 6rem;
+}
+.misc-demo .badges .ui-badge,
+.misc-demo .badges .ui-tag {
+ margin-right: 0.5rem;
+}
+.misc-demo .ui-chip.custom-chip {
+ background: var(--primary-color);
+ color: var(--primary-color-text);
+}
+.misc-demo .custom-scrolltop {
+ width: 2rem;
+ height: 2rem;
+ border-radius: 4px;
+ background-color: var(--primary-color);
+}
+.misc-demo .custom-scrolltop:hover {
+ background-color: var(--primary-color);
+}
+.misc-demo .custom-scrolltop .ui-scrolltop-icon {
+ font-size: 1rem;
+ color: var(--primary-color-text);
+}
+.misc-demo .custom-skeleton {
+ border: 1px solid var(--surface-d);
+ border-radius: 4px;
+}
+.misc-demo .custom-skeleton ul {
+ list-style: none;
+}
+
+.table-demo .ui-datatable .ui-column-filter {
+ display: none;
+}
+.table-demo .customers-table-header {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+ .table-demo .ui-progressbar {
+ margin-top: 0.5rem;
+ }
+}
+.custom-marker {
+ display: flex;
+ width: 2rem;
+ height: 2rem;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ border-radius: 50%;
+ z-index: 1;
+}
+
+.ui-chronoline-event-content,
+.ui-chronoline-event-opposite {
+ line-height: 1;
+}
+
+@media screen and (max-width: 960px) {
+ .customized-chronoline .ui-chronoline-event:nth-child(even) {
+ flex-direction: row !important;
+ }
+
+ .customized-chronoline .ui-chronoline-event:nth-child(even) .ui-chronoline-event-content {
+ text-align: left !important;
+ }
+
+ .customized-chronoline .ui-chronoline-event-opposite {
+ flex: 0;
+ }
+
+ .customized-chronoline .ui-card {
+ margin-top: 1rem;
+ }
+}
+.floatlabel-demo .field {
+ margin-top: 2rem;
+}
+
+/**
+* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
+* @author Tim Shedor
+*/
+code[class*=language-],
+pre[class*=language-] {
+ color: black;
+ background: none;
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*=language-] {
+ position: relative;
+ margin: 0.5em 0;
+ overflow: visible;
+ padding: 0;
+}
+
+pre[class*=language-] > code {
+ position: relative;
+ border-left: 10px solid #358ccb;
+ box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+ background-color: #fdfdfd;
+ background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+ background-size: 3em 3em;
+ background-origin: content-box;
+ background-attachment: local;
+}
+
+code[class*=language] {
+ max-height: inherit;
+ padding: 0 1em;
+ display: block;
+ overflow: auto;
+}
+
+/* Margin bottom to accomodate shadow */
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+ background-color: #fdfdfd;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-bottom: 1em;
+}
+
+/* Inline code */
+:not(pre) > code[class*=language-] {
+ position: relative;
+ padding: 0.2em;
+ border-radius: 0.3em;
+ color: #c92c2c;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ display: inline;
+ white-space: normal;
+}
+
+pre[class*=language-]:before,
+pre[class*=language-]:after {
+ content: "";
+ z-index: -2;
+ display: block;
+ position: absolute;
+ bottom: 0.75em;
+ left: 0.18em;
+ width: 40%;
+ height: 20%;
+ max-height: 13em;
+ box-shadow: 0px 13px 8px #979797;
+ -webkit-transform: rotate(-2deg);
+ -moz-transform: rotate(-2deg);
+ -ms-transform: rotate(-2deg);
+ -o-transform: rotate(-2deg);
+ transform: rotate(-2deg);
+}
+
+:not(pre) > code[class*=language-]:after,
+pre[class*=language-]:after {
+ right: 0.75em;
+ left: auto;
+ -webkit-transform: rotate(2deg);
+ -moz-transform: rotate(2deg);
+ -ms-transform: rotate(2deg);
+ -o-transform: rotate(2deg);
+ transform: rotate(2deg);
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #7D8B99;
+}
+
+.token.punctuation {
+ color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+ color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+ color: #a67f59;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+ color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+ color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+ color: #a67f59;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+ font-weight: normal;
+}
+
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.namespace {
+ opacity: 0.7;
+}
+
+@media screen and (max-width: 767px) {
+ pre[class*=language-]:before,
+pre[class*=language-]:after {
+ bottom: 14px;
+ box-shadow: none;
+ }
+}
+/* Plugin styles */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before {
+ color: #e0d7d1;
+}
+
+/* Plugin styles: Line Numbers */
+pre[class*=language-].line-numbers {
+ padding-left: 0;
+}
+
+pre[class*=language-].line-numbers code {
+ padding-left: 3.8em;
+}
+
+pre[class*=language-].line-numbers .line-numbers-rows {
+ left: 0;
+}
+
+/* Plugin styles: Line Highlight */
+pre[class*=language-][data-line] {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+}
+
+pre[data-line] code {
+ position: relative;
+ padding-left: 4em;
+}
+
+pre .line-highlight {
+ margin-top: 0;
+}
+
+/* PrimeFaces styles */
+pre[class*=language-]:before, pre[class*=language-]:after {
+ display: none !important;
+}
+pre[class*=language-] code {
+ border-left: 6px solid var(--surface-border) !important;
+ box-shadow: none !important;
+ background: var(--surface-ground) !important;
+ margin: 1em 0;
+ color: var(--text-color);
+}
+
+.language-css .token.string,
+.style .token.string {
+ background: transparent;
+}
+
+.block-section {
+ margin-bottom: 4rem;
+}
+
+.block-header {
+ padding: 1rem 2rem;
+ background-color: var(--surface-section);
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border: 1px solid var(--surface-d);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.block-header .block-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ display: inline-flex;
+ align-items: center;
+}
+.block-header .block-title .badge-free {
+ border-radius: 4px;
+ padding: 0.25rem 0.5rem;
+ background-color: var(--orange-500);
+ color: white;
+ margin-left: 1rem;
+ font-weight: 600;
+ font-size: 0.875rem;
+}
+.block-header .block-title .badge-new {
+ border-radius: 4px;
+ padding: 0.25rem 0.5rem;
+ background-color: var(--green-500);
+ color: white;
+ margin-left: 1rem;
+ font-weight: 600;
+ font-size: 0.875rem;
+}
+.block-header .block-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ user-select: none;
+}
+.block-header .block-actions a {
+ display: flex;
+ align-items: center;
+ margin-right: 0.75rem;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ border: 1px solid transparent;
+ transition: background-color 0.2s;
+ cursor: pointer;
+ color: var(--text-color);
+}
+.block-header .block-actions a:last-child {
+ margin-right: 0;
+}
+.block-header .block-actions a:not(.block-action-disabled):hover {
+ background-color: var(--surface-c);
+}
+.block-header .block-actions a.block-action-active {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+.block-header .block-actions a.block-action-copy i {
+ color: var(--primary-color);
+ font-size: 1.25rem;
+}
+.block-header .block-actions a.block-action-disabled {
+ opacity: 0.6;
+ pointer-events: none;
+ cursor: auto !important;
+}
+.block-header .block-actions a .pi-lock {
+ margin-right: 0.5rem;
+}
+
+.block-content {
+ padding: 0;
+ border: 1px solid var(--surface-d);
+ border-top: 0 none;
+}
+.block-content > div {
+ display: none;
+}
+.block-content > div.block-content-active {
+ display: block;
+}
+
+.block-section pre[class*=language-] {
+ margin: 0 !important;
+}
+.block-section pre[class*=language-]:before, .block-section pre[class*=language-]:after {
+ display: none !important;
+}
+.block-section pre[class*=language-] code {
+ border-left: 0 none !important;
+ box-shadow: none !important;
+ background: var(--surface-e) !important;
+ margin: 0;
+ color: var(--text-color);
+ font-size: 14px;
+ padding: 1.5rem 2rem !important;
+}
+
+@media screen and (max-width: 575px) {
+ .block-header {
+ flex-direction: column;
+ align-items: start;
+ }
+ .block-header .block-actions {
+ margin-top: 1rem;
+ }
+}
diff --git a/integration-tests/src/main/resources/META-INF/resources/demo/css/pages/_common.scss b/integration-tests/src/main/resources/META-INF/resources/demo/css/pages/_common.scss
new file mode 100644
index 0000000..cc053d1
--- /dev/null
+++ b/integration-tests/src/main/resources/META-INF/resources/demo/css/pages/_common.scss
@@ -0,0 +1,122 @@
+.order-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+
+ &.order-delivered {
+ background: #ACEBB4;
+ color: #348861;
+ }
+
+ &.order-cancelled {
+ background: #FABD9A;
+ color:#AD342B;
+ }
+
+ &.order-pending {
+ background: #F8D895;
+ color: #A76927;
+ }
+
+ &.order-returned {
+ background: #EFB8E5;
+ color: #833F91;
+ }
+}
+
+.product-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+ text-align: center;
+
+ &.status-instock {
+ background: #ACEBB4;
+ color: #348861;
+ }
+
+ &.status-outofstock {
+ background: #FABD9A;
+ color:#AD342B;
+ }
+
+ &.status-lowstock {
+ background: #F8D895;
+ color: #A76927;
+ }
+}
+
+.customer-badge {
+ border-radius: 2px;
+ padding: .25em .5rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: .3px;
+
+ &.status-qualified {
+ background: #ACEBB4;
+ color: #348861;
+ }
+
+ &.status-unqualified {
+ background: #FABD9A;
+ color:#AD342B;
+ }
+
+ &.status-negotiation {
+ background: #F8D895;
+ color: #A76927;
+ }
+
+ &.status-new {
+ background: #9BF2F7;
+ color: #2B7AA4;
+ }
+
+ &.status-renewal {
+ background: #EFB8E5;
+ color: #833F91;
+ }
+
+ &.status-proposal {
+ background: #FFD8B2;
+ color: #805B36;
+ }
+}
+
+.filter-container {
+ .ui-inputtext {
+ width: 400px;
+ }
+}
+
+.ui-selection-column {
+ width: 2rem;
+}
+
+@media (max-width: 640px) {
+ .filter-container {
+ width: 100%;
+ margin-top: .5rem;
+ }
+
+ .filter-container .ui-inputtext {
+ width: 100%;
+ }
+
+ .ui-selection-column {
+ width: auto;
+ text-align: center;
+
+ .ui-column-title {
+ display: none !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index 16e1d3d..a2b4103 100644
--- a/pom.xml
+++ b/pom.xml
@@ -3,7 +3,7 @@
4.0.0
dev.lions
primefaces-freya-extension-parent
-
1.0.0-SNAPSHOT
+
1.0.0
pom
PrimeFaces Freya Extension - Parent
diff --git a/runtime/pom.xml b/runtime/pom.xml
index 0fc86ff..d499fa7 100644
--- a/runtime/pom.xml
+++ b/runtime/pom.xml
@@ -4,7 +4,7 @@
dev.lions
primefaces-freya-extension-parent
- 1.0.0-SNAPSHOT
+ 1.0.0
primefaces-freya-extension
PrimeFaces Freya Extension - Runtime
diff --git a/runtime/src/main/resources/META-INF/resources/freya/avatar.xhtml b/runtime/src/main/resources/META-INF/resources/freya/avatar.xhtml
index ec467cc..c877e53 100644
--- a/runtime/src/main/resources/META-INF/resources/freya/avatar.xhtml
+++ b/runtime/src/main/resources/META-INF/resources/freya/avatar.xhtml
@@ -4,13 +4,151 @@
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
-
@@ -19,7 +157,10 @@
-
+
+
+
+
@@ -31,9 +172,14 @@
image="#{cc.attrs.image}"
size="#{cc.attrs.size}"
shape="#{cc.attrs.shape}"
- styleClass="#{cc.attrs.styleClass}"
- style="#{cc.attrs.style}" />
+ styleClass="ui-avatar-#{cc.attrs.severity} #{cc.attrs.bordered ? 'ui-avatar-bordered' : ''} #{cc.attrs.styleClass}"
+ style="#{cc.attrs.style}">
+
+
+