Skip to content

Commit 151023b

Browse files
javier-godoyjavier-godoy
committed
Refactoring
1 parent 4f1b522 commit 151023b

File tree

9 files changed

+125
-56
lines changed

9 files changed

+125
-56
lines changed

‎pom.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,12 @@
9393
</exclusion>
9494
</exclusions>
9595
</dependency>
96+
<dependency>
97+
<groupId>com.vaadin.componentfactory</groupId>
98+
<artifactId>togglebutton</artifactId>
99+
<version>1.0.0</version>
100+
<scope>test</scope>
101+
</dependency>
96102
<dependency>
97103
<groupId>org.slf4j</groupId>
98104
<artifactId>slf4j-simple</artifactId>

‎src/main/java/com/flowingcode/addons/applayout/HasMenuItemCommands.java‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ public default T setCommand(MouseButton button, Command command) {
2929

3030
data.commands.remove(button);
3131
if (command!=null) {
32-
Registration registration = getElement().addEventListener("item-click", ev->{
32+
Registration registration = getElement().addEventListener("mouseup", ev->{
3333
command.execute();
3434
AppDrawer.findAppDrawer((Component)this).ifPresent(AppDrawer::close);
35-
}).setFilter("event.detail=="+button.ordinal());
35+
}).setFilter("event.button=="+button.ordinal());
3636
data.commands.put(button, Pair.of(command, registration));
3737
}
3838

‎src/main/java/com/flowingcode/addons/applayout/HasMenuItemIcon.java‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ public default String getIcon() {
1111
public default T setIcon(String icon) {
1212
if (icon!=null) {
1313
getElement().setAttribute("icon", icon);
14-
getElement().removeAttribute("image");
14+
getElement().removeAttribute("src");
1515
} else {
1616
getElement().removeAttribute("icon");
1717
}
@@ -22,15 +22,15 @@ public default T setIcon(String icon) {
2222
}
2323

2424
public default String getImage() {
25-
return getElement().getAttribute("image");
25+
return getElement().getAttribute("src");
2626
}
2727

2828
public default T setImage(String imageUrl) {
2929
if (imageUrl!=null) {
30-
getElement().setAttribute("image", imageUrl);
30+
getElement().setAttribute("src", imageUrl);
3131
getElement().removeAttribute("icon");
3232
} else {
33-
getElement().removeAttribute("image");
33+
getElement().removeAttribute("src");
3434
}
3535

3636
@SuppressWarnings("unchecked")

‎src/main/java/com/flowingcode/addons/applayout/MenuItem.java‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121

2222

2323

24+
import java.util.function.Consumer;
25+
2426
import com.vaadin.flow.component.Component;
2527
import com.vaadin.flow.component.HasOrderedComponents;
2628
import com.vaadin.flow.component.Tag;
@@ -37,6 +39,7 @@
3739
*/
3840
@SuppressWarnings("serial")
3941
@NpmPackage(value="@polymer/iron-collapse", version = "^3.0.1")
42+
@NpmPackage(value = "@polymer/paper-item", version = "3.0.1")
4043
@JsModule("./iron-collapse-button/iron-collapse-button.js")
4144
@JsModule("./fc-applayout/fc-menuitem.js")
4245
@Tag("fc-menuitem")
@@ -53,19 +56,31 @@ public MenuItem(String label) {
5356
/** Create a new instance of {@code MenuItem} with a label and left-button command. */
5457
public MenuItem(String label, Command command) {
5558
this.setLabel(label);
56-
this.setCommand(command);
59+
this.setCommand(command);
60+
}
61+
62+
/** Create a new instance of {@code MenuItem} with a label and an icon. */
63+
public MenuItem(String label, String icon) {
64+
this(label);
65+
setIcon(icon);
5766
}
5867

68+
/** Create a new instance of {@code MenuItem} with a label and an {@code IconFactory}. */
69+
public MenuItem(String label, IconFactory icon) {
70+
this(label);
71+
setIcon(icon.create().getElement().getAttribute("icon"));
72+
}
73+
5974
/** Create a new instance of {@code MenuItem} with a label, an {@code IconFactory}, and left-button command. */
6075
public MenuItem(String label, IconFactory icon, Command command) {
61-
this(label, command);
62-
setIcon(icon.create().getElement().getAttribute("icon"));
76+
this(label, icon);
77+
this.setCommand(command);
6378
}
6479

6580
/** Create a new instance of {@code MenuItem} with a label, an icon, and left-button command. */
6681
public MenuItem(String label, String icon, Command command) {
67-
this(label, command);
68-
setIcon(icon);
82+
this(label, icon);
83+
this.setCommand(command);
6984
}
7085

7186
/**Adds the given menu items as children of this component.*/
@@ -96,6 +111,15 @@ public MenuItem setLabel(String label) {
96111
getElement().setAttribute("label", label);
97112
return this;
98113
}
114+
115+
public MenuItem configure(Consumer<MenuItem> consumer) {
116+
consumer.accept(this);
117+
return this;
118+
}
119+
120+
public void setIconSpacing(boolean value) {
121+
setIcon("fc-menuitem-icons:empty");
122+
}
99123

100124
}
101125

‎src/main/java/com/flowingcode/addons/applayout/SlottedMenuItem.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
* Menu item component.
2929
*/
3030
@SuppressWarnings("serial")
31-
public class SlottedMenuItem extends Component {
31+
public abstract class SlottedMenuItem extends Component {
3232

3333
@Override
3434
protected void onAttach(AttachEvent attachEvent) {

‎src/main/java/com/flowingcode/addons/applayout/ToolbarIconButton.java‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121

2222

2323

24+
import com.vaadin.flow.component.HasEnabled;
2425
import com.vaadin.flow.component.Tag;
26+
import com.vaadin.flow.component.dependency.HtmlImport;
2527
import com.vaadin.flow.component.dependency.JsModule;
2628
import com.vaadin.flow.component.dependency.NpmPackage;
2729
import com.vaadin.flow.component.icon.IconFactory;
@@ -32,36 +34,32 @@
3234
*
3335
*/
3436
@SuppressWarnings("serial")
35-
//@NpmPackage(value="@polymer/iron-icon", version = "^3.0.1")
36-
@NpmPackage(value="@polymer/iron-collapse", version = "^3.0.1")
37-
@JsModule("./iron-collapse-button/iron-collapse-button.js")
38-
@JsModule("./fc-applayout/fc-menuitem.js")
37+
@HtmlImport("bower_components/paper-icon-button/paper-icon-button.html")
38+
@NpmPackage(value = "@polymer/paper-icon-button", version = "3.0.2")
39+
@JsModule("@polymer/paper-icon-button/paper-icon-button.js")
3940
@Tag("paper-icon-button")
40-
public class ToolbarIconButton extends SlottedMenuItem implements HasMenuItemCommands<ToolbarIconButton>, HasMenuItemIcon<ToolbarIconButton> {
41+
public class ToolbarIconButton extends SlottedMenuItem implements
42+
HasEnabled, HasMenuItemCommands<ToolbarIconButton>, HasMenuItemIcon<ToolbarIconButton> {
4143

4244
/** No argument constructor */
4345
public ToolbarIconButton() {}
44-
45-
/** Create a new instance of {@code MenuItem} with a title. */
46-
public ToolbarIconButton(String title) {
47-
this.setTitle(title);
48-
}
49-
50-
/** Create a new instance of {@code MenuItem} with a title and left-button command. */
51-
public ToolbarIconButton(String title, Command command) {
52-
this.setTitle(title);
46+
47+
/** Create a new instance of {@code MenuItem} with a left-button command. */
48+
public ToolbarIconButton(Command command) {
5349
this.setCommand(command);
5450
}
5551

5652
/** Create a new instance of {@code MenuItem} with a title, an {@code IconFactory}, and left-button command. */
5753
public ToolbarIconButton(String title, IconFactory icon, Command command) {
58-
this(title, command);
54+
this(command);
55+
setTitle(title);
5956
setIcon(icon.create().getElement().getAttribute("icon"));
6057
}
6158

6259
/** Create a new instance of {@code MenuItem} with a title, an icon, and left-button command. */
6360
public ToolbarIconButton(String title, String icon, Command command) {
64-
this(title, command);
61+
this(command);
62+
setTitle(title);
6563
setIcon(icon);
6664
}
6765

‎src/main/resources/META-INF/frontend/fc-applayout/fc-menuitem.js‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,31 @@ class MenuItem extends ThemableMixin(PolymerElement) {
1616
display: block;
1717
--paper-item-disabled-color: var(--lumo-disabled-text-color);
1818
}
19-
:host(:not([has-icon])) {
20-
--paper-item-icon-width: 0;
21-
}
22-
:host(.iron-selected) > iron-collapse-button > paper-icon-item {
19+
:host(.iron-selected) #item {
2320
font-weight: var(--paper-item-selected-weight, bold);
2421
}
25-
:host paper-icon-item {
22+
:host #item {
2623
width: 100%;
24+
display: flex;
2725
}
28-
:host iron-collapse-button {
26+
:host > iron-collapse-button {
2927
background: inherit;
3028
}
29+
:host #label {
30+
flex-grow: 1
31+
}
3132
</style>
32-
33+
34+
<iron-iconset-svg name="fc-menuitem-icons" size="24">
35+
<svg><defs>
36+
<g id="empty"></g>
37+
</defs></svg>
38+
</iron-iconset-svg>
39+
3340
<iron-collapse-button no-icons="true">
34-
<paper-icon-item slot="collapse-trigger" role="option" disabled="[[disabled]]">
35-
<iron-icon src="[[image]]" icon="[[icon]]" slot="item-icon"></iron-icon>
36-
<span>[[label]]</span>
41+
<paper-icon-item id="item" slot="collapse-trigger" role="option" disabled="[[disabled]]">
42+
<iron-icon src="[[src]]" icon="[[icon]]" slot="item-icon"></iron-icon>
43+
<span id="label">[[label]]</span>
3744
<slot></slot>
3845
</paper-icon-item>
3946
<div slot="collapse-content" class="sub-menu">
@@ -46,13 +53,20 @@ class MenuItem extends ThemableMixin(PolymerElement) {
4653
return {
4754
key: String,
4855
label : String,
49-
icon : String,
50-
image : String,
56+
src : {
57+
type: String,
58+
reflectToAttribute: true
59+
},
60+
icon : {
61+
type: String,
62+
reflectToAttribute: true
63+
},
5164
disabled: Boolean,
5265
hasIcon: {
5366
type: Boolean,
5467
reflectToAttribute: true,
55-
computed: '__hasIcon(src,icon)'
68+
computed: '__hasIcon(src,icon)',
69+
observer: '__hasIconChanged'
5670
},
5771
isSubmenu: {
5872
type: Boolean,
@@ -76,25 +90,28 @@ class MenuItem extends ThemableMixin(PolymerElement) {
7690
}
7791
});
7892
this.addEventListener('mouseup', (event) => {
79-
this.dispatchEvent(new CustomEvent('item-click', {bubbles: true, detail: event.button}));
8093
event.preventDefault();
8194
return false;
8295
});
8396
this.addEventListener('contextmenu', event => {
8497
event.preventDefault();
8598
});
8699
}
87-
100+
101+
__hasIconChanged(hasIcon) {
102+
this.$.item.$.contentIcon.style.display=hasIcon?'flex':'none';
103+
}
88104
__hasIcon() {
89105
return !!(this.src || this.icon);
90106
}
91-
107+
92108
connectedCallback () {
93109
super.connectedCallback ();
94110
var slot = this.shadowRoot.querySelector("slot[name='menu-item']");
95-
var handler = this.__bindSubmenu.bind(this);
111+
var handler = this.__bindSubmenu.bind(this);
96112
slot.addEventListener('slotchange', handler);
97-
setTimeout(handler);
113+
handler();
114+
this.__hasIconChanged(this.hasIcon);
98115
}
99116

100117
__bindSubmenu() {

‎src/test/java/com/flowingcode/addons/applayout/DemoView.java‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
import com.flowingcode.addons.applayout.MouseClickEvent.MouseButton;
2929
import com.flowingcode.addons.applayout.menu.PaperCard;
30+
import com.vaadin.componentfactory.ToggleButton;
3031
import com.vaadin.flow.component.Component;
3132
import com.vaadin.flow.component.button.Button;
3233
import com.vaadin.flow.component.checkbox.Checkbox;
@@ -54,8 +55,7 @@ public class DemoView extends VerticalLayout {
5455

5556
private VerticalLayout container = new VerticalLayout();
5657
private final AppLayout app = new AppLayout(createLogoImage(), createAvatarComponent(), "AppLayout Vaadin 14 Demo");
57-
private final PaperIconButton miSettings = new PaperIconButton("settings", this::openSettings);
58-
//private final MenuItem miSettings = new MenuItem("settings", this::openSettings);
58+
private final ToolbarIconButton miSettings = new ToolbarIconButton("Settings", "settings", this::openSettings);
5959

6060
private final DemoSettings settings = new DemoSettings();
6161

@@ -177,29 +177,49 @@ private void toggleSettings(MenuItem toggleSettings) {
177177

178178
private Component[] createMenuItems() {
179179

180-
MenuItem mi = new MenuItem("Say hello", () -> showContent("Hello!")).setIcon("settings");
180+
MenuItem miHello = new MenuItem("Say hello", () -> showContent("Hello!")).setIcon("settings");
181181

182182
MenuItem miToggleSettings = new MenuItem().setIcon("settings");
183183
miToggleSettings.setCommand(() -> toggleSettings(miToggleSettings));
184184
toggleSettings(miToggleSettings);
185185

186+
this.getElement().getStyle().set("--icon-spacing", "normal");
187+
186188
return new Component[] {
189+
190+
//left, middle and right commands
191+
new MenuItem("Click", VaadinIcon.POINTER)
192+
.setCommand(MouseButton.LEFT, ()->Notification.show("LEFT click"))
193+
.setCommand(MouseButton.MIDDLE, ()->Notification.show("MIDDLE click"))
194+
.setCommand(MouseButton.RIGHT, ()->Notification.show("RIGHT click")),
195+
196+
new MenuItem("No icon"),
197+
198+
new MenuItem("No icon, spaced").configure(mi->mi.setIconSpacing(true)),
199+
200+
//menu item with custom content
201+
new MenuItem("Toggle").configure(mi->mi.add(new ToggleButton())),
202+
203+
new MenuItem("Toggle", VaadinIcon.BACKSPACE).configure(mi->mi.add(new ToggleButton())),
204+
205+
new MenuItem("Toggle", "fc-menuitem-icons:empty").configure(mi->mi.add(new ToggleButton())),
206+
187207
//icon as VaadinIcon enum
188208
new MenuItem("Content", VaadinIcon.BOOK, () -> showHamletContent())
189209
.setCommand(MouseButton.MIDDLE, ()->{
190210
getUI().ifPresent(ui->ui.getPage().executeJs("window.open(window.location.href, '_blank')"));
191211
}),
192212
miToggleSettings,
193-
mi,
213+
miHello,
194214
new MenuItem("About", "cloud", () -> showContent("About")), //icon as string
195215
new MenuItem("Clear Items", "clear", () -> app.clearMenuItems()),
196216
new MenuItem("Change Text & Icon", "cloud", () -> {
197-
if (mi.getIcon().equals("star")) {
198-
mi.setIcon("cloud");
199-
mi.setLabel("Say hello modified");
217+
if (miHello.getIcon().equals("star")) {
218+
miHello.setIcon("cloud");
219+
miHello.setLabel("Say hello modified");
200220
} else {
201-
mi.setIcon("star");
202-
mi.setLabel("Say hello");
221+
miHello.setIcon("star");
222+
miHello.setLabel("Say hello");
203223
}
204224
}),
205225
new MenuItem("SubMenu")
@@ -211,7 +231,7 @@ private Component[] createMenuItems() {
211231
.add(new MenuItem("Hello Again",()->showContent("Hello Again!")))
212232
.add(new MenuItem("And Again",()->showContent("And Again!")))
213233
),
214-
234+
215235
new MenuSeparator(),
216236

217237
new MenuItem("Item 1"),

‎src/test/resources/META-INF/frontend/styles/shared-styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,8 @@ img.applogo {
5757
.hamlet paper-card[elevation="0"] .card-content {
5858
padding: 8px;
5959
text-align: center;
60+
}
61+
62+
menu-item vcf-toggle-button {
63+
padding-bottom: 2px;
6064
}

0 commit comments

Comments
 (0)