adminfaces / admin-theme Goto Github PK

View Code? Open in Web Editor NEW

144.0 18.0 59.0 3.19 MB

Primefaces admin theme based on Admin LTE and Bootstrap

Home Page: https://adminfaces.github.io/site/docs/latest/#admin_theme

License: MIT License

Shell 0.38% Less 99.62%

adminlte jsf primefaces responsive bootstrap3 material-design

admin-theme's Introduction

Admin Theme

A PrimeFaces theme to admin them all!

This project is a Primefaces admin theme based on Admin LTE and Bootstrap.

Table of Contents

1. Introduction
2. Usage
3. Architecture
4. Theme classifiers
5. Avoiding theme caching
6. Development
7. Demo
8. Docs
9. Snapshot

1. Introduction

This theme is a css file containing Admin LTE and Bootstrap as well as customized Primefaces components to make them look like AdminLTE and Bootstrap.

2. Usage

Just add it to your application classpath:

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
<!--<classifier>dev</classifier> uncompressed theme.css-->
</dependency>

Add this context-param in your web.xml:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>admin</param-value>
</context-param>

💡	If you use Admin Template there is no need to add admin-theme to your classpath neither the web.xml entry.

3. Architecture

The theme uses less as css pre-processor. Each PrimeFaces component has its own less file:

src/main/resources/less

├── admin-lte
│    |
│    ├── bootstrap (1)
│    │
│    ├── skins (2)
│    │
│    └── admin lte less files
│
├── primefaces-admin
│    |
│    ├─ components (3)
│    │   |
│    │   ├── accordeon.less
│    │   │
│    │   ├── autocomplete.less
│    │   │
│    │   └── etc...
│    │
│    ├─ theme.less (4)
│    │
     └─ variables.less

Bootstrap variables and mixins are used as reference in AdminLTE and admin theme less files
Built in skins
PrimeFaces components
Components and Admin-LTE less files are included in theme.less

After compilation it will generate the theme.css with Admin-LTE, Bootstrap and Primefaces components.

ℹ️	Bootstrap.css (from src/META-INF/resources) is included in theme.less but can be removed via maven classifiers

ℹ️	Bootstrap less is not maintained in this project only it’s mixins.

4. Theme classifiers

This project uses maven classifiers to offer multiple faces (pum intended) of Admin Theme. Below is the description of each classifier and how to use it.

4.1. Default (no classifier)

The default theme comes compressed, with Bootstrap (3.3.7) embedded and uses JSF resource handling for loading images and web fonts.

Maven usage

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
</dependency>

4.2. Dev classifier

The dev classifier will bring a theme.css without minification.

Maven usage

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>dev</classifier>
</dependency>

4.3. Without Bootstrap classifier

The without-bootstrap classifier will bring a theme.css without bootstrap embedded so it’s up to the developer to provide Bootstrap within the application.

Maven usage

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>without-bootstrap</classifier>
</dependency>

4.4. Without JSF classifier

The without-jsf classifier will bring a theme.css without JSF resource handling so the theme can be used on projects (derived from PrimeFaces) without JSF like Prime React, PrimeUI or PrimeNG.

Maven usage

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>without-jsf</classifier>
</dependency>

4.5. No Fonts classifier

Since v1.0.0-RC16 web fonts such as glyphicons and Source Sans Pro were embedded inside the theme instead of being queried from a CDN.

This makes the theme work offline or in environments with limited access to the internet but on the other hand results in a larger jar file, ~1MB against ~200kb when fonts are not in the theme.

So if you want a thinner theme you can use the no-fonts classifier:

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>no-fonts</classifier>
</dependency>

5. Avoiding theme caching

Whenever the theme is updated to a new version in the project users may have to clear their browser caches to get the changes of the new theme. Sometimes a theme update even introduces conflicts and only clearing browser cache fixes them.

To solve this issues you can use a theme classifier called no-cache:

pom.xml

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>no-cache</classifier>
</dependency>

This classifier appends the theme version to the name of theme so you need to change the theme name in web.xml:

web.xml

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>admin-1.0.0</param-value>
</context-param>

💡	There is also a `no-cache-no-fonts` classifier combining both approaches.

6. Development

To get your hands dirty with admin theme it is recommended to use Admin Designer in combination with Brackets or any tool that compile less files to css on save.

Using designer, which is backed by Wildfly Swarm, plus brackets will let you change the components less files and see the results instantly.

ℹ️	theme.less is already brackets aware so you just need to change any component less file, save it and see the results in Admin Designer.

7. Demo

8. Docs

https://adminfaces.github.io/site/docs/latest/#admin_theme

9. Snapshot

Snapshots are published to maven central on each commit, to use it just declare the repository below on your pom.xml:

<repositories>
    <repository>
        <snapshots/>
        <id>snapshots</id>
        <name>libs-snapshot</name>
        <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    </repository>
</repositories>

admin-theme's People

Contributors

Stargazers

Watchers

admin-theme's Issues

Chip label misplaced

Like said on Twitter, when an issue is found, i will create an account and file them. Keep up the good work, i really like the theme implementation!

I found the following:
When adding a chip the label is misplaced

The below is what was expected

This is fixed by overriding this in the admin template with:
span.ui-autocomplete-token-label { display: inline-block; }
This currently is display: block.

Affected version: RC6
Browser: Chrome 58.0.3029.110 (Official Build) (64-bit)
OS: Windows 10

Adjust panel/dialog header icons opacity

Use Font awesome for datatable sort icons

Treetable mutiple selection blank checkbox

Issue Overview

The checkbox in treetable with multiple selection is blank

Current Behaviour

Expected Behaviour

How to reproduce

Just use a treetable with selection type checkbox

 <p:treeTable value="#{treeTableMB.root}" selectionMode="checkbox" selection="#{treeTableMB.selectedNodes}"

...

Additional Information

Affected version 1.0.0-RC6
Browser versio: any

Interactions cues should also apply to component borders

Component borders should change when component is focused.

Currently only box-shadow changes:

Expected would be

behaviour:

Style Treetable

Treetable needs to get some admin style.

Actual rendering:

Rendering issue with Chips component and Primefaces 6.1

Chips are miss rendered in PrimeFaces 6.1 final (with RC3 they it is ok):

Here's how it is supposed to render:

Datatable header must have same height as rows

In current rendering datatable headers are thiner than cells:

Style checkbox menu type multiple

Checkbox menu is not styled accordingly and also has a render bug:

Actual rendering:

It should use font awesome for icons and labels/values and also be styled like chips component.

Also error cues are not being applied:

Picklist colors alignmenet with other components

Current picklist:

Menu button in fluid grid must be 100%

Material design like radio button

Make radio button look like materialize one: https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button

Now it looks like:

selectCheckboxMenu misrendered in Firefox

Issue Overview

selectCheckboxMenu with type multiple is misrendered in Firefox

Current Behaviour

Selected items doesn't contain the close icon to remove item, also looks there is some aditional padding:

Expected Behaviour

Close icon should be rendered on selected itens so they can be removed:

How to reproduce

 <p:selectCheckboxMenu id="chkmenu-multiple" label="Cities"
                                          multiple="true" filter="true" filterMatchMode="startsWith">
                        <f:selectItems value="#{checkboxMB.cities}"/>
                    </p:selectCheckboxMenu>

Additional Information

Affected version: 1.0.0-RC6
Browser version: Firefox 53.0.3 (64-bit)

Use FontAwesome for menu and panel menu

use fa in p:panelMenu and p:menu.

Actual implementation:

expected:

Style primefaces chips as ngTagsInput

Make Primefaces chips component look like ngTags: http://mbenford.github.io/ngTagsInput/documentation/guides/bootstrap

SelectOne value alignment

SelectOne menu value is not centralized:

Current:

Expected:

Fix datatable with selection type single

Autocomplete error highlight not aplied on dropdown

Actual behaviour:

expected:

Box shadow on focus for input errors

Currently the 'focus shadow' is the same for inputs with or without error:

We should apply a different shadow on input with error state, like below:

Datatable must be similar to AdminLTE

Current datatable looks like:

AdminLTE one:

Here's how AdminFaces one should look like:

Provide a mechanism to deal with cached theme.css

Issue: When users update admin theme version they see css issues in components. Same happens with standard or premium primefaces themes, see here: primefaces/primefaces#1598

Solution:

One solution is to use OmniFaces combined resource handler and make it work with the theme, see example here: https://github.com/omnifaces/omnifaces/wiki/Combine-hardcoded-PrimeFaces-resources-using-CombinedResourceHandler.

Another solution is to create a maven classifier with the theme version, example:

 <dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0-RC5</version>
    <classifier>RC5</classifier> 
</dependency>

and in web.xml:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>admin-RC5</param-value>
 </context-param>

The first solution can be implemented by theme users in their applications. The second one needs to be provided by admin-theme.

responsive datatable paginator

Show only paginator pages on extreme small devides (480px)

Hability to generate theme without bootstrap

Currently admin theme comes with bootstrap.css embbeded.

Create a classifier, similar to dev classifier, named without-bootstrap in order to generate a theme.css file without bootstrap.

The usage may be something like:

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <classifier>exclude-bootstrap</classifier>
</dependency>

Checkbox menu label alignment

Checkbox menu label is not aligned (vertically):

Current rendering:

Here's expected:

multiple="true"

<p:selectCheckboxMenu id="usuarioFiltro"
				value="#{tarefaPortalBean.userSelecionado}" label="Usuários"
				multiple="true" filter="true" filterMatchMode="startsWith"
				panelStyle="width:250px"
				converter="omnifaces.SelectItemsConverter">
				<f:selectItems value="#{tarefaPortalBean.usuarios}" var="u"
					itemLabel="#{u.name}" itemValue="#{u}" />
			</p:selectCheckboxMenu>

calendar not well showed

        <!-- Page Content -->
        <div class="container">

            <div class="col-lg-12">            

                <div class="row">

                    <h3>Send us a Message</h3>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Full Name:</label>
                            <input type="text" class="form-control" id="name" required-message="Please enter your name.">
                                <p class="help-block"></p>
                            </input>
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Phone Number:</label>
                            <input type="tel" class="form-control" id="phone" required-message="Please enter your phone number.">
                            </input>
                        </div>
                    </div>


                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Date:</label>

                            <p:calendar class="form-control" value="#{controlFacturacio.facturaventa.datafactura}" />

                        </div>
                    </div>


                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Tag:</label>

                            <p:selectOneMenu id="car" value="#{controlFacturacio.tagSeleccionat}" converter="omnifaces.SelectItemsConverter" >
                                <f:selectItem itemLabel="Select One" itemValue="" />
                                <f:selectItems value="#{llistaTagLists}" var="tag" itemValue="#{tag}" itemLabel="#{tag.nomTag}" />
                            </p:selectOneMenu>      

                        </div>
                    </div>

                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Tag:</label>


                            <p:selectOneMenu id="console" value="#{controlFacturacio.tagTextSeleccionat}">
                                <f:selectItem itemLabel="Select One" itemValue="" />
                                <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                            </p:selectOneMenu>                                    


                        </div>
                    </div>


                    <div id="success"></div>


                    <p:commandButton ajax="true" value="Crea Factura"  icon="fa fa-plus" styleClass="btn-primary" actionListener="#{controlFacturacio.creaFactura(actionEvent)}" />          


                </div>

            </div>            
        </div>

Chrome:

Paginator icons too big

After migration to FontAwesome (#36) the paginator icons got too big.

Actual:

Expected:

expected:

        <div class="container">

            <div class="col-lg-12">            

                <div class="row">

                    <h3>Nova Factura</h3>

                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Import Factura:</label>

                            <p:inputNumber styleClass="form-control" id="importfactura" value="#{controlFacturacio.facturaventa.importfactura}" symbol=" EUR" symbolPosition="s" 
                                           decimalSeparator="," thousandSeparator=".">  
                            </p:inputNumber>                                  
                        </div>
                    </div>




                </div>

            </div>            
        </div>

adminfaces / admin-theme Goto Github PK

admin-theme's Introduction

Admin Theme

1. Introduction

2. Usage

3. Architecture

4. Theme classifiers

4.1. Default (no classifier)

4.2. Dev classifier

4.3. Without Bootstrap classifier

4.4. Without JSF classifier

4.5. No Fonts classifier

5. Avoiding theme caching

6. Development

7. Demo

8. Docs

9. Snapshot

admin-theme's People

Contributors

Stargazers

Watchers

Forkers

admin-theme's Issues

Issue Overview

Current Behaviour

Expected Behaviour

How to reproduce

Additional Information

Issue Overview

Current Behaviour

Expected Behaviour

How to reproduce

Additional Information

Recommend Projects

Recommend Topics

Recommend Org