UI improvement

This commit is contained in:
huangyuhui 2017-08-14 18:09:02 +08:00
parent 6121a0cade
commit 6179bcdf5b
14 changed files with 143 additions and 93 deletions

View File

@ -25,9 +25,12 @@ import javafx.beans.binding.Bindings
import javafx.fxml.FXML
import javafx.scene.control.Label
import javafx.scene.control.ToggleGroup
import javafx.scene.effect.BlurType
import javafx.scene.effect.DropShadow
import javafx.scene.layout.Pane
import javafx.scene.layout.StackPane
import javafx.scene.layout.VBox
import javafx.scene.paint.Color
import java.util.concurrent.Callable
class AccountItem(i: Int, group: ToggleGroup) : StackPane() {
@ -43,14 +46,17 @@ class AccountItem(i: Int, group: ToggleGroup) : StackPane() {
init {
loadFXML("/assets/fxml/account-item.fxml")
JFXDepthManager.setDepth(this, 1)
limitWidth(150.0)
limitHeight(140.0)
effect = DropShadow(BlurType.GAUSSIAN, Color.rgb(0, 0, 0, 0.26), 5.0, 0.12, -0.5, 1.0)
chkSelected.toggleGroup = group
btnDelete.graphic = SVG.delete("white", 15.0, 15.0)
// create content
val headerColor = getDefaultColor(i % 12)
header.style = "-fx-background-radius: 5 5 0 0; -fx-background-color: " + headerColor
header.style = "-fx-background-radius: 2 2 0 0; -fx-background-color: " + headerColor
body.minHeight = Math.random() * 20 + 50
// create image view

View File

@ -41,13 +41,11 @@ class AdvancedListBox: ScrollPane() {
fun add(child: Node): AdvancedListBox {
if (child is Pane) {
//child.maxWidthProperty().bind(this.widthProperty())
container.children += child
} else {
val pane = StackPane()
pane.styleClass += "advanced-list-box-item"
pane.children.setAll(child)
//pane.maxWidthProperty().bind(this.widthProperty())
container.children += pane
}
return this

View File

@ -121,7 +121,17 @@ val stylesheets = arrayOf(
Controllers::class.java.getResource("/css/jfoenix-design.css").toExternalForm(),
Controllers::class.java.getResource("/assets/css/jfoenix-main-demo.css").toExternalForm())
fun Region.limitWidth(width: Double) {
maxWidth = width
minWidth = width
prefWidth = width
}
fun Region.limitHeight(height: Double) {
maxHeight = height
minHeight = height
prefHeight = height
}
fun bindInt(textField: JFXTextField, property: Property<*>) {
textField.textProperty().unbind()

View File

@ -47,7 +47,14 @@ class LeftPaneController(private val leftPane: AdvancedListBox) {
})
.startCategory(i18n("ui.label.profile"))
.add(cboProfiles)
.startCategory(i18n("ui.label.version"))
.startCategory("LAUNCHER")
.add(IconedItem(SVG.gear("black"), "Settings").apply {
prefWidthProperty().bind(leftPane.widthProperty())
setOnMouseClicked {
Controllers.navigate(Controllers.settingsPane)
}
})
/* .startCategory(i18n("ui.label.version"))
.add(versionsPane)
EVENT_BUS.channel<RefreshedVersionsEvent>() += this::loadVersions
@ -62,7 +69,7 @@ class LeftPaneController(private val leftPane: AdvancedListBox) {
Controllers.decorator.refreshMenuButton.setOnMouseClicked {
Settings.selectedProfile.repository.refreshVersions()
}
Controllers.mainPane.buttonLaunch.setOnMouseClicked { LauncherHelper.launch() }
Controllers.mainPane.buttonLaunch.setOnMouseClicked { LauncherHelper.launch() }*/
Settings.selectedAccountProperty.addListener { _, _, newValue ->
if (newValue == null) {
@ -78,7 +85,7 @@ class LeftPaneController(private val leftPane: AdvancedListBox) {
if (Settings.getAccounts().isEmpty())
Controllers.navigate(AccountsPage())
}
/*
fun onProfilesLoading() {
// TODO: Profiles
}
@ -119,5 +126,5 @@ class LeftPaneController(private val leftPane: AdvancedListBox) {
versionsPane.children
.filter { it is RipplerContainer && it.properties["version"] is Pair<*, *> }
.forEach { (it as RipplerContainer).selected = (it.properties["version"] as Pair<String, VersionListItem>).first == selectedVersion }
}
}*/
}

View File

@ -48,25 +48,21 @@ import org.jackhuang.hmcl.ui.wizard.DecoratorPage
class MainPage : StackPane(), DecoratorPage {
override val titleProperty: StringProperty = SimpleStringProperty(this, "title", i18n("launcher.title.main"))
@FXML lateinit var buttonLaunch: JFXButton
@FXML lateinit var btnLaunch: JFXButton
@FXML lateinit var masonryPane: JFXMasonryPane
init {
loadFXML("/assets/fxml/main.fxml")
//EVENT_BUS.channel<RefreshedVersionsEvent>() += this::loadVersions
//EVENT_BUS.channel<ProfileLoadingEvent>() += this::onProfilesLoading
//EVENT_BUS.channel<ProfileChangedEvent>() += this::onProfileChanged
EVENT_BUS.channel<RefreshedVersionsEvent>() += this::loadVersions
EVENT_BUS.channel<ProfileLoadingEvent>() += this::onProfilesLoading
EVENT_BUS.channel<ProfileChangedEvent>() += this::onProfileChanged
//Settings.onProfileLoading()
Settings.onProfileLoading()
//Controllers.decorator.addMenuButton.setOnMouseClicked {
// Controllers.decorator.startWizard(DownloadWizardProvider(), "Install New Game")
//}
//Controllers.decorator.refreshMenuButton.setOnMouseClicked {
// Settings.selectedProfile.repository.refreshVersions()
//}
//buttonLaunch.setOnMouseClicked { LauncherHelper.launch() }
btnLaunch.setOnMouseClicked { LauncherHelper.launch() }
}
private fun buildNode(i: Int, profile: Profile, version: String, game: String, group: ToggleGroup): Node {
@ -79,6 +75,10 @@ class MainPage : StackPane(), DecoratorPage {
profile.repository.removeVersionFromDisk(version)
Platform.runLater(this@MainPage::loadVersions)
}
btnSettings.setOnMouseClicked {
Controllers.decorator.showPage(Controllers.versionPane)
Controllers.versionPane.load(version, profile)
}
}
}

View File

@ -21,14 +21,5 @@ import com.jfoenix.controls.JFXDrawer
class SidePaneController(sidePane: AdvancedListBox, drawer: JFXDrawer) {
init {
sidePane
.startCategory("LAUNCHER")
.add(IconedItem(SVG.gear("black"), "Settings").apply {
prefWidthProperty().bind(sidePane.widthProperty())
setOnMouseClicked {
Controllers.navigate(Controllers.settingsPane)
drawer.close()
}
})
}
}

View File

@ -25,9 +25,12 @@ import javafx.beans.binding.Bindings
import javafx.fxml.FXML
import javafx.scene.control.Label
import javafx.scene.control.ToggleGroup
import javafx.scene.effect.BlurType
import javafx.scene.effect.DropShadow
import javafx.scene.layout.Pane
import javafx.scene.layout.StackPane
import javafx.scene.layout.VBox
import javafx.scene.paint.Color
import java.util.concurrent.Callable
class VersionItem(i: Int, group: ToggleGroup) : StackPane() {
@ -36,6 +39,7 @@ class VersionItem(i: Int, group: ToggleGroup) : StackPane() {
@FXML lateinit var header: StackPane
@FXML lateinit var body: StackPane
@FXML lateinit var btnDelete: JFXButton
@FXML lateinit var btnSettings: JFXButton
@FXML lateinit var lblVersionName: Label
@FXML lateinit var chkSelected: JFXRadioButton
@FXML lateinit var lblGameVersion: Label
@ -43,18 +47,21 @@ class VersionItem(i: Int, group: ToggleGroup) : StackPane() {
init {
loadFXML("/assets/fxml/version-item.fxml")
JFXDepthManager.setDepth(this, 1)
limitWidth(190.0)
limitHeight(156.0)
effect = DropShadow(BlurType.GAUSSIAN, Color.rgb(0, 0, 0, 0.26), 5.0, 0.12, -1.0, 1.0)
chkSelected.toggleGroup = group
btnDelete.graphic = SVG.delete("white", 15.0, 15.0)
btnSettings.graphic = SVG.gear("black", 15.0, 15.0)
btnDelete.graphic = SVG.delete("black", 15.0, 15.0)
// create content
val headerColor = getDefaultColor(i % 12)
header.style = "-fx-background-radius: 5 5 0 0; -fx-background-color: " + headerColor
body.minHeight = 50.0
header.style = "-fx-background-radius: 2 2 0 0; -fx-background-color: " + headerColor
// create image view
icon.translateYProperty().bind(Bindings.createDoubleBinding(Callable { header.boundsInParent.height - icon.height / 2 }, header.boundsInParentProperty(), icon.heightProperty()))
icon.translateYProperty().bind(Bindings.createDoubleBinding(Callable { header.boundsInParent.height - icon.height }, header.boundsInParentProperty(), icon.heightProperty()))
}
private fun getDefaultColor(i: Int): String {

View File

@ -0,0 +1,40 @@
/*
* Hello Minecraft! Launcher.
* Copyright (C) 2017 huangyuhui <huanghongxun2008@126.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see {http://www.gnu.org/licenses/}.
*/
package org.jackhuang.hmcl.ui.construct
import javafx.collections.FXCollections
import javafx.collections.ObservableList
import javafx.scene.control.MultipleSelectionModel
class NoneMultipleSelectionModel<T> : MultipleSelectionModel<T>() {
override fun isEmpty() = true
override fun selectAll() = Unit
override fun selectIndices(index: Int, vararg indices: Int) = Unit
override fun select(obj: T) = Unit
override fun select(index: Int) = Unit
override fun selectLast() = Unit
override fun selectFirst() = Unit
override fun selectNext() = Unit
override fun clearSelection(index: Int) = Unit
override fun clearSelection() = Unit
override fun clearAndSelect(index: Int) = Unit
override fun selectPrevious() = Unit
override fun isSelected(index: Int) = false
override fun getSelectedItems(): ObservableList<T> = FXCollections.emptyObservableList<T>()
override fun getSelectedIndices(): ObservableList<Int> = FXCollections.emptyObservableList<Int>()
}

View File

@ -12,25 +12,22 @@
xmlns:fx="http://javafx.com/fxml"
type="StackPane">
<VBox fx:id="content">
<StackPane styleClass="debug-border" fx:id="header" VBox.vgrow="ALWAYS">
<StackPane fx:id="header" VBox.vgrow="ALWAYS">
<BorderPane>
<top>
<HBox styleClass="debug-border" alignment="CENTER_RIGHT">
<JFXButton fx:id="btnDelete" styleClass="toggle-icon3" />
<HBox alignment="CENTER_RIGHT">
<JFXButton fx:id="btnDelete" styleClass="toggle-icon3" maxWidth="30" maxHeight="30" minWidth="30" minHeight="30" prefWidth="30" prefHeight="30" />
</HBox>
</top>
<center>
<BorderPane styleClass="debug-border" style="-fx-padding: 0 0 0 20;">
<top>
<VBox style="-fx-padding: 0 0 5 20;">
<Label fx:id="lblUser" style="-fx-font-size: 20;" wrapText="true" textAlignment="JUSTIFY" />
</top><bottom>
<Label fx:id="lblType" style="-fx-font-size: 10;" />
</bottom>
</BorderPane>
</VBox>
</center>
</BorderPane>
</StackPane>
<StackPane fx:id="body" styleClass="debug-border" style="-fx-background-radius: 0 0 5 5; -fx-background-color: rgb(255,255,255,0.87); -fx-padding: 0 0 10 0;">
<StackPane fx:id="body" style="-fx-background-radius: 0 0 2 2; -fx-background-color: rgb(255,255,255,0.87); -fx-padding: 0 0 10 0;">
<JFXRadioButton fx:id="chkSelected" StackPane.alignment="BOTTOM_RIGHT" />
</StackPane>
</VBox>

View File

@ -4,13 +4,10 @@
<?import com.jfoenix.transitions.hamburger.HamburgerBackArrowBasicTransition?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.Rectangle?>
<?import java.lang.String?>
<?import org.jackhuang.hmcl.ui.AdvancedListBox?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<fx:root xmlns="http://javafx.com/javafx"
type="StackPane"
xmlns:fx="http://javafx.com/fxml">
@ -37,24 +34,6 @@
<center>
<AdvancedListBox fx:id="leftPane" />
</center>
<bottom>
<BorderPane fx:id="menuBottomBar">
<left>
<JFXButton fx:id="refreshMenuButton" styleClass="toggle-icon4">
<graphic>
<fx:include source="/assets/svg/refresh-black.fxml"/>
</graphic>
</JFXButton>
</left>
<right>
<JFXButton fx:id="addMenuButton" styleClass="toggle-icon4">
<graphic>
<fx:include source="/assets/svg/plus-black.fxml"/>
</graphic>
</JFXButton>
</right>
</BorderPane>
</bottom>
</BorderPane>
</center>
<right>

View File

@ -7,25 +7,30 @@
maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
styleClass="transparent" type="StackPane"
xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1">
<!--ScrollPane fitToHeight="true" fitToWidth="true" fx:id="scrollPane" hbarPolicy="NEVER">
<JFXMasonryPane fx:id="masonryPane">
<ScrollPane fitToHeight="true" fitToWidth="true" fx:id="scrollPane" hbarPolicy="NEVER">
<JFXMasonryPane fx:id="masonryPane" HSpacing="3" VSpacing="3" cellWidth="192" cellHeight="160">
</JFXMasonryPane>
</ScrollPane-->
<BorderPane>
<center>
<StackPane fx:id="page" BorderPane.alignment="CENTER" />
</center>
<bottom>
<BorderPane prefHeight="50.0" BorderPane.alignment="CENTER">
<right>
<StackPane prefHeight="50.0" BorderPane.alignment="CENTER">
<JFXSpinner fx:id="spinner" style="-fx-radius:16" styleClass="materialDesign-purple, first-spinner" />
<JFXButton fx:id="buttonLaunch" prefWidth="200" prefHeight="40" buttonType="RAISED" text="%ui.button.run"
style="-fx-text-fill:WHITE;-fx-background-color:#5264AE;-fx-font-size:14px;"/>
</StackPane>
</right>
</BorderPane>
</bottom>
</BorderPane>
</ScrollPane>
<VBox style="-fx-padding: 15;" spacing="15" pickOnBounds="false" alignment="BOTTOM_RIGHT">
<!--JFXSpinner fx:id="spinner" style="-fx-radius:10" styleClass="materialDesign-purple, first-spinner" /-->
<JFXButton prefWidth="40" prefHeight="40" buttonType="RAISED" fx:id="btnRefresh"
style="-fx-background-color:#5264AE;-fx-background-radius: 50px;">
<graphic>
<fx:include source="/assets/svg/refresh.fxml" />
</graphic>
</JFXButton>
<JFXButton prefWidth="40" prefHeight="40" buttonType="RAISED" fx:id="btnAdd"
style="-fx-background-color:#5264AE;-fx-background-radius: 50px;">
<graphic>
<fx:include source="/assets/svg/plus.fxml" />
</graphic>
</JFXButton>
<JFXButton prefWidth="40" prefHeight="40" buttonType="RAISED" fx:id="btnLaunch"
style="-fx-background-color:#5264AE;-fx-background-radius: 50px;">
<graphic>
<fx:include source="/assets/svg/rocket.fxml" />
</graphic>
</JFXButton>
</VBox>
</fx:root>

View File

@ -12,26 +12,36 @@
xmlns:fx="http://javafx.com/fxml"
type="StackPane">
<VBox fx:id="content">
<StackPane styleClass="debug-border" fx:id="header" VBox.vgrow="ALWAYS">
<StackPane fx:id="header" VBox.vgrow="ALWAYS">
<BorderPane>
<top>
<HBox styleClass="debug-border" alignment="CENTER_RIGHT">
<JFXButton fx:id="btnDelete" styleClass="toggle-icon3" />
<HBox alignment="CENTER_RIGHT">
</HBox>
</top>
<center>
<VBox styleClass="debug-border" style="-fx-padding: 0 0 0 20;">
<Label fx:id="lblVersionName" style="-fx-font-size: 15;" />
<Label fx:id="lblGameVersion" style="-fx-font-size: 10;" />
<VBox style="-fx-padding: 20 20 0 20;">
<Label fx:id="lblVersionName" style="-fx-font-size: 15;" textAlignment="JUSTIFY" wrapText="true" />
<Label fx:id="lblGameVersion" style="-fx-font-size: 10;" textAlignment="JUSTIFY" wrapText="true" />
</VBox>
</center>
</BorderPane>
</StackPane>
<StackPane styleClass="debug-border" fx:id="body" style="-fx-background-radius: 0 0 5 5; -fx-background-color: rgb(255,255,255,0.87); -fx-padding: 0 0 10 0;">
<JFXRadioButton fx:id="chkSelected" StackPane.alignment="BOTTOM_RIGHT" />
<StackPane fx:id="body" style="-fx-background-radius: 0 0 2 2; -fx-background-color: rgb(255,255,255,0.87); -fx-padding: 8;" minHeight="40">
<BorderPane>
<left>
<HBox spacing="8">
<JFXButton fx:id="btnSettings" styleClass="toggle-icon4" maxWidth="30" maxHeight="30" minWidth="30" minHeight="30" prefWidth="30" prefHeight="30" />
<JFXButton fx:id="btnDelete" styleClass="toggle-icon4" maxWidth="30" maxHeight="30" minWidth="30" minHeight="30" prefWidth="30" prefHeight="30" />
</HBox>
</left>
<right>
<JFXRadioButton fx:id="chkSelected" BorderPane.alignment="CENTER_RIGHT" />
</right>
</BorderPane>
</StackPane>
</VBox>
<StackPane styleClass="debug-border" fx:id="icon" StackPane.alignment="TOP_RIGHT" pickOnBounds="false">
<StackPane fx:id="icon" StackPane.alignment="TOP_RIGHT" pickOnBounds="false">
<ImageView StackPane.alignment="CENTER_RIGHT">
<StackPane.margin>
<Insets right="12" />

View File

@ -1,2 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<javafx.scene.shape.SVGPath content="M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z" />
<javafx.scene.shape.SVGPath fill="white" content="M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z" />