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 People

Contributors

Stargazers

Watchers

admin-theme's Issues

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:

SelectCheckboxMenu trigger is not rendered correctly

As reported here. The problem happens when

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>

Fix SelectCheckboxMenu width

Fix datatable with selection type single

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:

Datatable footer not showing

Use FontAwesome for Datatable paginator

Material design like calendar/date picker

Make calendar component look like material design calendar:

Current calendar

expected:

Use FontAwesome in dropdown arrow

Replare dropdown arrow for font awesome (caret-down icon) for better rendering.

Current rendering:

Datatable header must have same height as rows

In current rendering datatable headers are thiner than cells:

Adjust tabview a responsiveness in small devices

TabView width must be set to 100% on small devices

Use FontAwesome for menu and panel menu

use fa in p:panelMenu and p:menu.

Actual implementation:

expected:

Use FontAwesome for p:tree

Actual rendering:

Expected:

Use FontAwesome in treetable

Paginator icons too big

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

Actual:

Expected:

AdminFaces Logo

Create a logo/brand for AdminFaces

p:inputNumber not well showed

        <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>

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

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)

Promo video

Create a video showing AdminFaces main features.

Style primefaces chips as ngTagsInput

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

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:

Autocomplete trigger icon issue with Firefox

The autocomplete trigger icon is misaligned in firefox.

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:

SelectOne value alignment

SelectOne menu value is not centralized:

Current:

Expected:

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>

Datatable borders

Add borders only on top and bottom of rows as in material design datatables: https://material.io/guidelines/components/data-tables.html#

It is related to #7

Use Font awesome for datatable sort icons

Add issue template for github

Adjust panel/dialog header icons opacity

Calendar inside dialog issue

Use fontawesome for tabview close icon

Actual rendering:

Using fontawesome:

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

Datatable rendering issues on Firefox

Datatable borders and header are not rendered well on Firefox:

Firefox:

Chrome:

Picklist colors alignmenet with other components

Current picklist:

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.

Checkbox menu label alignment

Checkbox menu label is not aligned (vertically):

Current rendering:

Here's expected:

Datatable must be similar to AdminLTE

Current datatable looks like:

AdminLTE one:

Here's how AdminFaces one should look like:

        <!-- 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>

adminfaces / admin-theme Goto Github PK

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