appreciated / vaadin-app-layout Goto Github PK

View Code? Open in Web Editor NEW

83.0 16.0 45.0 25.52 MB

<app-layout> integration for Vaadin 8.1+, 10+ and 14+

License: Apache License 2.0

Java 79.70% CSS 3.09% JavaScript 17.21%

app-layout vaadin-addon vaadin8 vaadin10

vaadin-app-layout's Introduction

A collection of ready to use templates for the Webcomponent <app-layout>

Versioning

Vaadin 8 -> App-Layout 1.*
Vaadin 10 -> App-Layout 2.*
Vaadin 13 or Vaadin 14 with bower mode -> App-Layout 3.*
Vaadin 14 with NPM Mode -> App-Layout App-Layout 4.*

Installation

Add the following lines to you POM

<dependency>
   <groupId>com.github.appreciated</groupId>
   <artifactId>app-layout-addon</artifactId>
   <version></version>
</dependency>

<!-- Should be there by default
<repository>
   <id>vaadin-addons</id>
   <url>https://maven.vaadin.com/vaadin-addons</url>
</repository> 
-->

Execute the following command in the at the root of your project

mvn install

Building and running demo

1.

git clone [email protected]:appreciated/vaadin-app-layout.git

2.

cd <project-root-dir>
mvn clean install -DskipTests # to skip the integration tests
cd <project-root-dir>/app-layout-addon
mvn jetty:run

To see the demo, navigate to http://localhost:8080/

Issue tracking

The issues for this add-on are tracked on its github.com page. All bug reports and feature requests are appreciated.

Branching information

master the latest version of the app-layout, currently even with V13
V8 version based on Vaadin 8 -> App-Layout 1.*
V10 version based on Vaadin 10 -> App-Layout 2.*
V13 support is discontinued due to the short support consider to upgrade to Vaadin 14 instead
V14 version based on Vaadin 14 -> App-Layout 4.*

Contributions

Contributions are welcome, but there are no guarantees that they are accepted as such. Process for contributing is the following:

Fork this project
Create an issue to this project about the contribution (bug or feature) if there is no such issue about it already. Try to keep the scope minimal.
Develop and test the fix or functionality carefully. Only include minimum amount of code needed to fix the issue.
Refer to the fixed issue in commit
Send a pull request for the original project
Comment on the original issue that you have implemented a fix for it

License & Author

Add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.

The Java Project vaadin-app-layout is written by appreciated and the lovely peole that send pull requests.

The used Polymer Components are distributed under the BSD License

Donations

You like this Project and want to support me?

Features

...

vaadin-app-layout's People

Stargazers

Watchers

vaadin-app-layout's Issues

Add a Top Behavior

Add the Menu Element in Desktop Mode to the Top Bar and in Mobile mode to the Left Side As to be seen here

NotificationCenter "Show All"-Button problems

Check the "Show All" Button below

Add missing method to Submenu

@kamuffe Thank you very much for reporting

Theme compile failed after switch to 0.9.10

Just switched from older 0.9.3 and now getting theme compilation error
Vaadin 8.6.1, standard Valo theme (no customizations)

If I just switch back to 0.9.3 - it works again.

Any hint what could be wrong ?

Thanks,
Dmitri

ERROR] Exception in thread "main" java.lang.NullPointerException
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.adjust(ColorUtil.java:575)
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.lighten(ColorUtil.java:588)
[ERROR] at com.vaadin.sass.internal.parser.function.LightenFunctionGenerator.computeForArgumentList(LightenFunctionGenerator.java:42)
[ERROR] at com.vaadin.sass.internal.parser.function.AbstractFunctionGenerator.compute(AbstractFunctionGenerator.java:72)
[ERROR] at com.vaadin.sass.internal.parser.LexicalUnitImpl.evaluateFunctionsAndExpressions(LexicalUnitImpl.java:826)
[ERROR] at com.vaadin.sass.internal.tree.VariableNode.traverse(VariableNode.java:84)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:298)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:267)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:101)
[ERROR] Exception in thread "main" java.lang.NullPointerException
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.adjust(ColorUtil.java:575)
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.lighten(ColorUtil.java:588)
[ERROR] at com.vaadin.sass.internal.parser.function.LightenFunctionGenerator.computeForArgumentList(LightenFunctionGenerator.java:42)
[ERROR] at com.vaadin.sass.internal.parser.function.AbstractFunctionGenerator.compute(AbstractFunctionGenerator.java:72)
[ERROR] at com.vaadin.sass.internal.parser.LexicalUnitImpl.evaluateFunctionsAndExpressions(LexicalUnitImpl.java:826)
[ERROR] at com.vaadin.sass.internal.tree.VariableNode.traverse(VariableNode.java:84)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:298)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:267)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:101)

Don't display View

when I try to display a view from the menu does not show it.

I test with the example you have and it does not work either.

The value for the max-height animation in Submenus is too small

Reported by @abonhote in Issue #44.

Set a higher value by default and allow the value to be manipulated via a scss variable.

Allow to also add a Icon to the MenuElement Annotation

"SMALL" Behaviour transitions need styling improvements

TOP Large Styling Issues under Internet Explorer

Adding elements to AppLayout object dynamically

Hi!

Is there a way to add elements, like menu items and submenus, dynamically? I'd like to loop over an array after I created the AppLayout object and add items one by one.

I tried many things, for example this:

AppLayout drawer = AppLayoutBuilder.get().withBehaviour(variant).build();
        drawer.setTitle("XYZ");
       drawer.addNavigationHeaderElement(new MenuHeader("App Layout", "Version 0.9.11", new ThemeResource("logo.png")));
        drawer.addNavigationElement(new NavigatorNavigationElement("Responsive",VaadinIcons.ABACUS, View1.class).getComponent());

Line 2 and 3 work, but addNavigationElement throws a null pointer exception.

Any idea appreciated!

Cheers

André

Refactor the builder pattern.

The builder pattern does initialization that it is not supposed to do. This part need to go into a seperate Class -> AppLayoutConfiguration.

Also the resulting AppLayout should not accept non components as parameter to make things clearer for the user.

Programatically Closable Hybrid Menu

Excellent Work. Can you add Hidden Menu Drawer Option By Default If Required (As it auto hides in Mobile Version)

Internet Explorer not working at all

Can you test the design with chrome browser and firefox? there are some issues with the style.

LEFT_OVERLAY : i think that is fine!
LEFT_RESPONSIVE : i think that is fine!

LEFT_RESPONSIVE_OVERLAY :
CHROME > no show the hamburguer button.
FIREFOX > always show the hamburguer button.

LEFT_RESPONSIVE_OVERLAY_NO_APP_BAR :
CHROME > no show the top bar (APP BAR).
FIREFOX > always show the top bar (APP BAR).

LEFT_RESPONSIVE_SMALL : don't reduce the width of HEADER component.

LEFT_RESPONSIVE_SMALL_NO_APP_BAR:
CHROME > no show the top bar (APP BAR) and don't reduce the width of HEADER component.
FIREFOX > always show the top bar (APP BAR), don't reduce the width of HEADER component and always show the hamburguer button.

Default Notification Item description text missing max length

On the Default Notification Item could be a max length (with "..." at the end) and / or a word wrap option, that the full text can be displayed.

used method:

	notificationBar.addNotification(new DefaultNotification(caption, description));

Missing Styles

We added the AppLayout as described in our pom.
All styles are missing. We had to add them manually in our theme. We have an own theme which imports the Vaadin standard theme "Valo". Did we miss something?

Thanks very much

Missing JavaDoc

We had some issues replacing standard Vaadin MenuBar with your Addon. During investigation the missing JavaDoc made it very hard to understand your code.

Please ad proper JavaDoc describing what your intention is.

Use CDIViews

Hey, I like your layout very much.
But I'm not able to use CDIViews for navigation.
Is it possible to use CDIViews?

Notification - add effect if new item has been added

Notification - add effect if new item has been added. Maybe with an option to disable/enable

VaadinCdiView Support

can have any option to back navigation with navigationbar..

How to close the popup NotificationWindow

How to close the popup NotificationWindow when user click the content of notification.

Nav looks broken on Chrome

I've got installed the 0.7.2 version because the latest version gives me a NullPointerException when I call the build() method (it's because an AppBarIcon is not required on previous versions). The problem is that when I run my app on Google Chrome now the Toolbar looks broken, but if I run it on explorer it looks perfect.

calc() function causing height to be cropped

I found the solution :
https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function

Behaviour LEFT_RESPONSIVE_HYBRID_OVERLAY_NO_APP_BAR has a too small content height in some cases

.app-bar-application-content {
    width: 100%;
    height: calc(100vh - 64px);
}

Should only be set in the mobile version

Menu Items highlighted after reloading page

Slider bar without the AppBar

Great addon, thanks for the effort.
Is it possible to use only the slider bar(drawer) without the app bar?

Update the sidebar selectors on navigator

After navigating to a view through the invocation of the navigator.navigateTo() method (or after a direct navigation through the browser url), the corresponding navigation item in the sidebar drawer should be marked as selected.

Hide the left nav & message popup automatically after user click one item

After user click the item on the left nav or the alarm popup message, Is there any way to close the left nav and the popup layout automatically.

Because I am trying to use it in the mobile Application. every time when user click the menu item, he has to hide the nav manually.

Thank you very much.

URL enhancement

when I have a menu description with accented characters the URL shows the accents and in other cases places symbols to replace it, just as it keeps spaces

it is advisable to avoid that type of characters in the presentation of the URL, thus remaining in the description of the menu

Here is an example of how to treat them:

public void addViewToNavigator(Navigator navigator) {

    String newName = StringUtils.stripAccents(WordUtils.capitalizeFully(name).replaceAll(" ", ""));

    if (view != null) {
        navigator.addView(newName , view);
    } else if (className != null) {
        navigator.addView(newName , className);
    }
}

public void setNavigationClickListener(NavigatorNavigationElement element) {

    NavigationBadgeButton button = (NavigationBadgeButton) element.getComponent();
    String newName = StringUtils.stripAccents(WordUtils.capitalizeFully(element.getName()).replaceAll(" ", ""));

    button.getButton().addClickListener(clickEvent -> {
        UI.getCurrent().getNavigator().navigateTo(newName);
        AbstractNavigationDrawer.closeDrawerIfNotPersistent();
    });

}

this are the imports:

import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.text.WordUtils;

How to use SpringNavigator?

Hi,
I would like to use your Menu in my application. I use vaadin-spring, so I have a SpringNavigator and Spring views.

Switching between the Views may look like this:
navigator.navigateTo("the-view");

If I use your AppLayoutBuilder I'm not able to add a menu entry giving just the view name, I have to give an instance of the view or the view class name.

Is there any chance to use SpringViews together with your AppLayout?

Cheers,
Christoph

Default Navigation Not Working

Sir,

.withDefaultNavigationView(MainView.class) does not work, It show empty View.

below is my code

appLayout = AppLayoutBuilder.get()
                   .withBehaviour(Behaviour.LEFT)
                   .withTitle("eTravel")
                   **.withDefaultNavigationView(MainView.class)**
                   .withDesign(AppBarDesign.MATERIAL)
                   //.add(new MenuHeader("App-Layout", "0.9.4", new ThemeResource("img/logo.png")), Position.HEADER)
                   .add("Home", VaadinIcons.BUSS, MainView.class)
                   .add("Bus Chart", VaadinIcons.CHART, BusChartView.class)
                   .add(SubmenuBuilder.get("Setting", VaadinIcons.COG)
                           .add("City", VaadinIcons.ROAD, CityView.class)
                           .add("Service", VaadinIcons.AUTOMATION, ServiceView.class)
                           .build())
                   .add(SubmenuBuilder.get("Account", VaadinIcons.FILE)
                           .add("Ledger", VaadinIcons.BOOK, LedgerView.class)
                           .add("Receipt", VaadinIcons.CLIPBOARD, ReceiptView.class)
                           .add("Payment", VaadinIcons.CLIPBOARD_CHECK, PaymentView.class)
                           .add("Contra", VaadinIcons.CLIPBOARD_CROSS, MainView.class)
                           .add("Journal", VaadinIcons.CLIPBOARD_TEXT, MainView.class)
                           .build())
                   .add(SubmenuBuilder.get("Reports", VaadinIcons.BAR_CHART)
                           .add("Reciept Report", VaadinIcons.CHART_GRID, CustomLayout.class)
                           .add("Payment Report", VaadinIcons.LINE_CHART, CustomLayout.class)
                           .add("Account Report", VaadinIcons.MENU, AccountReportLayout.class)
                           .build())
                   .add(SubmenuBuilder.get("Tools", VaadinIcons.HAMMER)
                           .add("Backup", VaadinIcons.DATABASE, BackupView.class)
                           .add("Restore", VaadinIcons.DISC, RestoreView.class)
                           .build())
                   //.addClickable("Click Me", VaadinIcons.QUESTION, clickEvent -&gt; {/*Click Event*/})
                   .add("Preferences", VaadinIcons.COG, MainView.class, Position.FOOTER)  
                   .build();

Add tooltips for the icons in "SMALL" mode

Allow Custom Image Views to be added to the MenuHeader Component for a better usability

Allow Notification to be set "already seen"

Improve Badge Behaviour

Preparation for release 1.0

Test behaviors for issues on multiple browsers:

Chrome:

Firefox:

Edge:

Safari:

Mobile Safari:

Opera:

Internet Explorer:

Sass compilation error

Disable scrolling while the menu is being dragged open

Menu Elements sometimes shift out of place

Especially happening in "HYBRID" behaviors. Vaadin Layouts do not update their children automatically when the size is being changed via CSS. Can be fixed easily be by using Flexbox + CssLayout instead of setting the Expand Ratio.

How i add a errorView

I like add a View as navigation error by default --> .withDefaultErrorView()

UI corrupted

After adding your library my whole app is corrupted and my components look very ugly just attaching the one screen shot of my login page.

Possible to use in sub layout or in the views

Woaah nice it is working for the Material Addon also now i have one more question is it possible to add this component inside the views for example how do i use this inside grid cells where i need to open the app Layout within the grid cell instead of opening this on top of whole view page at left side of the page

vh cannot be used on mobile devices

See here

Can be fixed by using position:fixed

Add method execution

New Feature:
Being able to execute a method instead of navigate by this way can navigate to a external link or add Windows to the UI by code.

Default Navigation View don't show

the Default Navigation View don't show,
unless the page is refreshed.

RoundImage Compile Error

20:34:34,335 SEVERE [com.vaadin.server.DefaultErrorHandler] (default task-4) : java.lang.NoSuchMethodError: com.github.appreciated.app.layout.component.RoundImage.addStyleNames([Ljava/lang/String;)V

Happens when trying to compile this code.

        DefaultBadgeHolder holder = new DefaultBadgeHolder(); // I can indicate updates in another "navigatable" element
        holder.increase();

        AppLayout layout = AppLayoutBuilder.get()
                .withBehaviour(Behaviour.LEFT_RESPONSIVE_OVERLAY_NO_APP_BAR)
                .withTitle("Appbar Demo")
                .withDefaultNavigationView(View1.class)
                .withDesign(AppBarDesign.DEFAULT)
                .add(new MenuHeader("App-Layout", "0.9.4", new ThemeResource("logo.png")), HEADER)
                .add("Home", VaadinIcons.HOME, holder, View1.class)
                .add("Charts", VaadinIcons.SPLINE_CHART, View2.class)
                .add(SubmenuBuilder.get("Submenu", VaadinIcons.FILE_TREE)
                        .add("We are", VaadinIcons.CONNECT, View3.class)
                        .add("Submenu", VaadinIcons.PLUS, View4.class)
                        .add("Elements", VaadinIcons.MENU, View5.class)
                        .build())
                .addClickable("Click Me", VaadinIcons.QUESTION, clickEvent -> {/*Click Event*/})
                .add("Preferences", VaadinIcons.COG, View6.class, FOOTER)
                .build();
        setContent(layout);

Navigator help

Hi. First of all great job!
Is there any way to set the navigator variable of the NavigationDrawerBuilder?
I have some views that I don't want to add to the NavigationDrawerBuilder as NavigationElements but I need them to be added to the navigator (e.g. products/my-product view).

Thanks!
Matías

Can't use the add-on in OSGi

Hello,

I'd like to use the add-on in an OSGi Vaadin application but there are 2 issues:

the jar file is not a valid OSGi bundle since MANIFEST.MF doesn't contain any Import-Package and Export-Package statements
once I transformed the jar into a bundle using the bundle fails because of
http://localhost:8181/vaadin-8.1.5/VAADIN/bower_components/webcomponentsjs/webcomponents-lite.js could not be loaded.

So there bower_components seem to be missing ... not sure where they should be coming from?

Alex