UI improvement

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/AccountItem.kt

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

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/AdvancedListBox.kt

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

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/FXUtils.kt

@@ -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()

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/LeftPaneController.kt

@@ -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 }
-    }
+    }*/
 }

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/MainPage.kt

@@ -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<RefreshedVersionsEvent>() += this::loadVersions
-        //EVENT_BUS.channel<ProfileLoadingEvent>() += this::onProfilesLoading
+        EVENT_BUS.channel<ProfileLoadingEvent>() += this::onProfilesLoading
-        //EVENT_BUS.channel<ProfileChangedEvent>() += this::onProfileChanged
+        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()
-        //}
+        btnLaunch.setOnMouseClicked { LauncherHelper.launch() }
-        //buttonLaunch.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)
+            }
         }
     }
 

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/SidePaneController.kt

@@ -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()
-                    }
-                })
     }
 }

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/VersionItem.kt

@@ -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
+        header.style = "-fx-background-radius: 2 2 0 0; -fx-background-color: " + headerColor
-        body.minHeight = 50.0
 
         // 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 {

HMCL/src/main/kotlin/org/jackhuang/hmcl/ui/construct/NoneMultipleSelectionModel.kt

@@ -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>()
+}

HMCL/src/main/resources/assets/fxml/account-item.fxml

@@ -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">
+                    <HBox alignment="CENTER_RIGHT">
-                        <JFXButton fx:id="btnDelete" styleClass="toggle-icon3" />
+                        <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;">
+                    <VBox style="-fx-padding: 0 0 5 20;">
-                        <top>
                         <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>
+                    </VBox>
-                    </BorderPane>
                 </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>

HMCL/src/main/resources/assets/fxml/decorator.fxml

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

HMCL/src/main/resources/assets/fxml/main.fxml

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

HMCL/src/main/resources/assets/fxml/version-item.fxml

@@ -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">
+                    <HBox alignment="CENTER_RIGHT">
-                        <JFXButton fx:id="btnDelete" styleClass="toggle-icon3" />
                     </HBox>
                 </top>
                 <center>
-                    <VBox styleClass="debug-border" style="-fx-padding: 0 0 0 20;">
+                    <VBox style="-fx-padding: 20 20 0 20;">
-                        <Label fx:id="lblVersionName" style="-fx-font-size: 15;" />
+                        <Label fx:id="lblVersionName" style="-fx-font-size: 15;" textAlignment="JUSTIFY" wrapText="true" />
-                        <Label fx:id="lblGameVersion" style="-fx-font-size: 10;" />
+                        <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;">
+        <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">
-            <JFXRadioButton fx:id="chkSelected" StackPane.alignment="BOTTOM_RIGHT" />
+            <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" />

HMCL/src/main/resources/assets/fxml/version-list-item.fxml

@@ -19,10 +19,10 @@
                 </ImageView>
                 <BorderPane style="-fx-padding: 0 0 0 10;">
                     <top>
-                    <Label fx:id="lblVersionName" maxWidth="100" style="-fx-font-size: 15;" textAlignment="JUSTIFY" />
+                        <Label fx:id="lblVersionName" maxWidth="100" style="-fx-font-size: 15;" textAlignment="JUSTIFY" />
                     </top>
                     <bottom>
-                    <Label fx:id="lblGameVersion" maxWidth="100" style="-fx-font-size: 10;" textAlignment="JUSTIFY" />
+                        <Label fx:id="lblGameVersion" maxWidth="100" style="-fx-font-size: 10;" textAlignment="JUSTIFY" />
                     </bottom>
                 </BorderPane>
             </HBox>

HMCL/src/main/resources/assets/svg/rocket.fxml

@@ -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" />