mirror of
https://github.com/xpipe-io/xpipe.git
synced 2024-11-21 23:20:23 +00:00
Rework icons
This commit is contained in:
parent
3372d77e0d
commit
72785ade3e
8 changed files with 72 additions and 49 deletions
|
@ -8,6 +8,7 @@ import io.xpipe.app.fxcomps.SimpleComp;
|
|||
import io.xpipe.app.fxcomps.impl.FilterComp;
|
||||
import io.xpipe.app.fxcomps.impl.IconButtonComp;
|
||||
import io.xpipe.app.fxcomps.util.BindingsHelper;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.util.ThreadHelper;
|
||||
import io.xpipe.core.process.OsType;
|
||||
|
||||
|
@ -148,15 +149,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
|
|||
}
|
||||
|
||||
private Comp<?> createAlphabeticalSortButton() {
|
||||
var icon = Bindings.createStringBinding(
|
||||
var icon = Bindings.createObjectBinding(
|
||||
() -> {
|
||||
if (sortMode.getValue() == StoreSortMode.ALPHABETICAL_ASC) {
|
||||
return "mdi2s-sort-alphabetical-descending";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-descending");
|
||||
}
|
||||
if (sortMode.getValue() == StoreSortMode.ALPHABETICAL_DESC) {
|
||||
return "mdi2s-sort-alphabetical-ascending";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-ascending");
|
||||
}
|
||||
return "mdi2s-sort-alphabetical-descending";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-descending");
|
||||
},
|
||||
sortMode);
|
||||
var alphabetical = new IconButtonComp(icon, () -> {
|
||||
|
@ -189,15 +190,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
|
|||
}
|
||||
|
||||
private Comp<?> createDateSortButton() {
|
||||
var icon = Bindings.createStringBinding(
|
||||
var icon = Bindings.createObjectBinding(
|
||||
() -> {
|
||||
if (sortMode.getValue() == StoreSortMode.DATE_ASC) {
|
||||
return "mdi2s-sort-clock-ascending-outline";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-ascending-outline");
|
||||
}
|
||||
if (sortMode.getValue() == StoreSortMode.DATE_DESC) {
|
||||
return "mdi2s-sort-clock-descending-outline";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-descending-outline");
|
||||
}
|
||||
return "mdi2s-sort-clock-ascending-outline";
|
||||
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-ascending-outline");
|
||||
},
|
||||
sortMode);
|
||||
var date = new IconButtonComp(icon, () -> {
|
||||
|
|
|
@ -7,6 +7,7 @@ import io.xpipe.app.fxcomps.augment.GrowAugment;
|
|||
import io.xpipe.app.fxcomps.impl.HorizontalComp;
|
||||
import io.xpipe.app.fxcomps.impl.IconButtonComp;
|
||||
import io.xpipe.app.fxcomps.impl.VerticalComp;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.storage.DataColor;
|
||||
import io.xpipe.app.util.ThreadHelper;
|
||||
|
||||
|
@ -68,11 +69,11 @@ public class StoreSectionComp extends Comp<CompStructure<VBox>> {
|
|||
|
||||
private Comp<CompStructure<Button>> createExpandButton() {
|
||||
var expandButton = new IconButtonComp(
|
||||
Bindings.createStringBinding(
|
||||
() -> section.getWrapper().getExpanded().get()
|
||||
Bindings.createObjectBinding(
|
||||
() -> new LabelGraphic.IconGraphic(section.getWrapper().getExpanded().get()
|
||||
&& section.getShownChildren().getList().size() > 0
|
||||
? "mdal-keyboard_arrow_down"
|
||||
: "mdal-keyboard_arrow_right",
|
||||
: "mdal-keyboard_arrow_right"),
|
||||
section.getWrapper().getExpanded(),
|
||||
section.getShownChildren().getList()),
|
||||
() -> {
|
||||
|
|
|
@ -8,6 +8,7 @@ import io.xpipe.app.fxcomps.impl.HorizontalComp;
|
|||
import io.xpipe.app.fxcomps.impl.IconButtonComp;
|
||||
import io.xpipe.app.fxcomps.impl.PrettyImageHelper;
|
||||
import io.xpipe.app.fxcomps.impl.VerticalComp;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.storage.DataColor;
|
||||
|
||||
import javafx.beans.binding.Bindings;
|
||||
|
@ -81,8 +82,8 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
|
|||
new SimpleBooleanProperty(section.getWrapper().getExpanded().get()
|
||||
&& section.getShownChildren().getList().size() > 0);
|
||||
var button = new IconButtonComp(
|
||||
Bindings.createStringBinding(
|
||||
() -> expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right",
|
||||
Bindings.createObjectBinding(
|
||||
() -> new LabelGraphic.IconGraphic(expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right"),
|
||||
expanded),
|
||||
() -> {
|
||||
expanded.set(!expanded.get());
|
||||
|
|
|
@ -5,22 +5,22 @@ import io.xpipe.app.browser.session.BrowserSessionComp;
|
|||
import io.xpipe.app.browser.session.BrowserSessionModel;
|
||||
import io.xpipe.app.comp.store.StoreLayoutComp;
|
||||
import io.xpipe.app.fxcomps.Comp;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.prefs.AppPrefsComp;
|
||||
import io.xpipe.app.util.Hyperlinks;
|
||||
import io.xpipe.app.util.LicenseProvider;
|
||||
|
||||
import javafx.beans.property.Property;
|
||||
import javafx.beans.property.SimpleObjectProperty;
|
||||
import javafx.beans.value.ObservableValue;
|
||||
import javafx.scene.input.KeyCode;
|
||||
import javafx.scene.input.KeyCodeCombination;
|
||||
import javafx.scene.input.KeyCombination;
|
||||
|
||||
import lombok.Builder;
|
||||
import lombok.Data;
|
||||
import lombok.Getter;
|
||||
import lombok.extern.jackson.Jacksonized;
|
||||
|
||||
import java.time.*;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
|
@ -75,43 +75,43 @@ public class AppLayoutModel {
|
|||
var l = new ArrayList<>(List.of(
|
||||
new Entry(
|
||||
AppI18n.observable("browser"),
|
||||
"mdi2f-file-cabinet",
|
||||
new LabelGraphic.IconGraphic("mdi2f-file-cabinet"),
|
||||
new BrowserSessionComp(BrowserSessionModel.DEFAULT),
|
||||
null,
|
||||
new KeyCodeCombination(KeyCode.DIGIT1, KeyCombination.SHORTCUT_DOWN)),
|
||||
new Entry(
|
||||
AppI18n.observable("connections"),
|
||||
"mdi2c-connection",
|
||||
new LabelGraphic.IconGraphic("mdi2c-connection"),
|
||||
new StoreLayoutComp(),
|
||||
null,
|
||||
new KeyCodeCombination(KeyCode.DIGIT2, KeyCombination.SHORTCUT_DOWN)),
|
||||
new Entry(
|
||||
AppI18n.observable("settings"),
|
||||
"mdsmz-miscellaneous_services",
|
||||
new LabelGraphic.IconGraphic("mdsmz-miscellaneous_services"),
|
||||
new AppPrefsComp(),
|
||||
null,
|
||||
new KeyCodeCombination(KeyCode.DIGIT3, KeyCombination.SHORTCUT_DOWN)),
|
||||
new Entry(
|
||||
AppI18n.observable("explorePlans"),
|
||||
"mdi2p-professional-hexagon",
|
||||
new LabelGraphic.IconGraphic("mdi2p-professional-hexagon"),
|
||||
LicenseProvider.get().overviewPage(),
|
||||
null,
|
||||
null),
|
||||
new Entry(
|
||||
AppI18n.observable("visitGithubRepository"),
|
||||
"mdi2g-github",
|
||||
new LabelGraphic.IconGraphic("mdi2g-github"),
|
||||
null,
|
||||
() -> Hyperlinks.open(Hyperlinks.GITHUB),
|
||||
null),
|
||||
new Entry(
|
||||
AppI18n.observable("discord"),
|
||||
"mdi2d-discord",
|
||||
new LabelGraphic.IconGraphic("mdi2d-discord"),
|
||||
null,
|
||||
() -> Hyperlinks.open(Hyperlinks.DISCORD),
|
||||
null),
|
||||
new Entry(
|
||||
AppI18n.observable("api"),
|
||||
"mdi2c-code-json",
|
||||
new LabelGraphic.IconGraphic("mdi2c-code-json"),
|
||||
null,
|
||||
() -> Hyperlinks.open(
|
||||
"http://localhost:" + AppBeaconServer.get().getPort()),
|
||||
|
@ -123,6 +123,20 @@ public class AppLayoutModel {
|
|||
// () -> Hyperlinks.open(Hyperlinks.GITHUB_WEBTOP),
|
||||
// null)
|
||||
));
|
||||
|
||||
var now = Instant.now();
|
||||
var zone = ZoneId.of(ZoneId.SHORT_IDS.get("PST"));
|
||||
var phStart = ZonedDateTime.of(2024,10,22,0,1, 0, 0, zone).toInstant();
|
||||
var phEnd = ZonedDateTime.of(2024,10,22,23,59, 0, 0, zone).toInstant();
|
||||
var phShow = now.isAfter(phStart) && now.isBefore(phEnd);
|
||||
if (phShow) {
|
||||
l.add(new Entry(
|
||||
AppI18n.observable("api"),
|
||||
new LabelGraphic.ImageGraphic("app:producthunt-color.png", 24),
|
||||
null,
|
||||
() -> Hyperlinks.open(Hyperlinks.PRODUCT_HUNT),
|
||||
null));
|
||||
}
|
||||
return l;
|
||||
}
|
||||
|
||||
|
@ -135,6 +149,5 @@ public class AppLayoutModel {
|
|||
double browserConnectionsWidth;
|
||||
}
|
||||
|
||||
public record Entry(
|
||||
ObservableValue<String> name, String icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
|
||||
public record Entry(ObservableValue<String> name, LabelGraphic icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
|
||||
}
|
||||
|
|
|
@ -1,38 +1,45 @@
|
|||
package io.xpipe.app.fxcomps.impl;
|
||||
|
||||
import atlantafx.base.theme.Styles;
|
||||
import io.xpipe.app.fxcomps.Comp;
|
||||
import io.xpipe.app.fxcomps.CompStructure;
|
||||
import io.xpipe.app.fxcomps.SimpleCompStructure;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.fxcomps.util.PlatformThread;
|
||||
|
||||
import javafx.beans.property.SimpleObjectProperty;
|
||||
import javafx.beans.value.ObservableValue;
|
||||
import javafx.css.Size;
|
||||
import javafx.css.SizeUnits;
|
||||
import javafx.scene.control.Button;
|
||||
|
||||
import atlantafx.base.theme.Styles;
|
||||
import org.kordamp.ikonli.javafx.FontIcon;
|
||||
|
||||
public class IconButtonComp extends Comp<CompStructure<Button>> {
|
||||
|
||||
private final ObservableValue<String> icon;
|
||||
private final ObservableValue<? extends LabelGraphic> icon;
|
||||
private final Runnable listener;
|
||||
|
||||
public IconButtonComp(String defaultVal) {
|
||||
this(new SimpleObjectProperty<>(new LabelGraphic.IconGraphic(defaultVal)), null);
|
||||
}
|
||||
|
||||
public IconButtonComp(String defaultVal, Runnable listener) {
|
||||
this(new SimpleObjectProperty<>(new LabelGraphic.IconGraphic(defaultVal)), listener);
|
||||
}
|
||||
|
||||
public IconButtonComp(LabelGraphic defaultVal) {
|
||||
this(new SimpleObjectProperty<>(defaultVal), null);
|
||||
}
|
||||
|
||||
public IconButtonComp(ObservableValue<String> icon) {
|
||||
public IconButtonComp(ObservableValue<? extends LabelGraphic> icon) {
|
||||
this.icon = icon;
|
||||
this.listener = null;
|
||||
}
|
||||
|
||||
public IconButtonComp(String defaultVal, Runnable listener) {
|
||||
public IconButtonComp(LabelGraphic defaultVal, Runnable listener) {
|
||||
this(new SimpleObjectProperty<>(defaultVal), listener);
|
||||
}
|
||||
|
||||
public IconButtonComp(ObservableValue<String> icon, Runnable listener) {
|
||||
public IconButtonComp(ObservableValue<? extends LabelGraphic> icon, Runnable listener) {
|
||||
this.icon = PlatformThread.sync(icon);
|
||||
this.listener = listener;
|
||||
}
|
||||
|
@ -41,18 +48,17 @@ public class IconButtonComp extends Comp<CompStructure<Button>> {
|
|||
public CompStructure<Button> createBase() {
|
||||
var button = new Button();
|
||||
button.getStyleClass().add(Styles.FLAT);
|
||||
|
||||
var fi = new FontIcon(icon.getValue());
|
||||
fi.setFocusTraversable(false);
|
||||
icon.addListener((c, o, n) -> {
|
||||
fi.setIconLiteral(n);
|
||||
icon.subscribe(labelGraphic -> {
|
||||
button.setGraphic(labelGraphic.createGraphicNode());
|
||||
if (button.getGraphic() instanceof FontIcon fi) {
|
||||
fi.setIconSize((int) new Size(button.getFont().getSize(), SizeUnits.PT).pixels());
|
||||
}
|
||||
});
|
||||
fi.setIconSize((int) new Size(fi.getFont().getSize(), SizeUnits.PT).pixels());
|
||||
button.fontProperty().addListener((c, o, n) -> {
|
||||
button.fontProperty().subscribe((n) -> {
|
||||
if (button.getGraphic() instanceof FontIcon fi) {
|
||||
fi.setIconSize((int) new Size(n.getSize(), SizeUnits.PT).pixels());
|
||||
}
|
||||
});
|
||||
// fi.iconColorProperty().bind(button.textFillProperty());
|
||||
button.setGraphic(fi);
|
||||
if (listener != null) {
|
||||
button.setOnAction(e -> {
|
||||
listener.run();
|
||||
|
|
|
@ -12,6 +12,7 @@ import io.xpipe.app.fxcomps.Comp;
|
|||
import io.xpipe.app.fxcomps.SimpleComp;
|
||||
import io.xpipe.app.fxcomps.augment.ContextMenuAugment;
|
||||
import io.xpipe.app.fxcomps.util.DerivedObservableList;
|
||||
import io.xpipe.app.fxcomps.util.LabelGraphic;
|
||||
import io.xpipe.app.storage.DataColor;
|
||||
import io.xpipe.app.storage.DataStorage;
|
||||
import io.xpipe.app.storage.DataStoreCategory;
|
||||
|
@ -57,11 +58,11 @@ public class StoreCategoryComp extends SimpleComp {
|
|||
.createRegion();
|
||||
var showing = new SimpleBooleanProperty();
|
||||
|
||||
var expandIcon = Bindings.createStringBinding(
|
||||
var expandIcon = Bindings.createObjectBinding(
|
||||
() -> {
|
||||
var exp = category.getExpanded().get()
|
||||
&& category.getChildren().size() > 0;
|
||||
return exp ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right";
|
||||
return new LabelGraphic.IconGraphic(exp ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right");
|
||||
},
|
||||
category.getExpanded(),
|
||||
category.getChildren());
|
||||
|
@ -78,18 +79,18 @@ public class StoreCategoryComp extends SimpleComp {
|
|||
.tooltipKey("expand", new KeyCodeCombination(KeyCode.SPACE));
|
||||
|
||||
var hover = new SimpleBooleanProperty();
|
||||
var statusIcon = Bindings.createStringBinding(
|
||||
var statusIcon = Bindings.createObjectBinding(
|
||||
() -> {
|
||||
if (hover.get()) {
|
||||
return "mdomz-settings";
|
||||
return new LabelGraphic.IconGraphic("mdomz-settings");
|
||||
}
|
||||
|
||||
if (!DataStorage.get().supportsSharing()
|
||||
|| !category.getCategory().canShare()) {
|
||||
return "mdi2g-git";
|
||||
return new LabelGraphic.IconGraphic("mdi2g-git");
|
||||
}
|
||||
|
||||
return category.getSync().getValue() ? "mdi2g-git" : "mdi2c-cancel";
|
||||
return new LabelGraphic.IconGraphic(category.getSync().getValue() ? "mdi2g-git" : "mdi2c-cancel");
|
||||
},
|
||||
category.getSync(),
|
||||
hover);
|
||||
|
|
|
@ -14,8 +14,8 @@ public class Hyperlinks {
|
|||
public static final String DISCORD = "https://discord.gg/8y89vS8cRb";
|
||||
public static final String GITHUB_WEBTOP = "https://github.com/xpipe-io/xpipe-webtop";
|
||||
public static final String SELFHST_ICONS = "https://github.com/selfhst/icons";
|
||||
public static final String SLACK =
|
||||
"https://join.slack.com/t/XPipe/shared_invite/zt-1awjq0t5j-5i4UjNJfNe1VN4b_auu6Cg";
|
||||
public static final String SLACK = "https://join.slack.com/t/XPipe/shared_invite/zt-1awjq0t5j-5i4UjNJfNe1VN4b_auu6Cg";
|
||||
public static final String PRODUCT_HUNT = "https://www.producthunt.com/posts/xpipe?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-xpipe";
|
||||
|
||||
static final String[] browsers = {
|
||||
"xdg-open", "google-chrome", "firefox", "opera", "konqueror", "mozilla", "gnome-open", "open"
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 764 B |
Loading…
Reference in a new issue