From fe6c19532ab1cb2c7dab66099ddf6e7fcf49d82b Mon Sep 17 00:00:00 2001 From: Yair Morgenstern Date: Sat, 7 Jan 2023 22:12:31 +0200 Subject: [PATCH] UI: Better unit table --- android/assets/Skin.json | 561 ++++++++++-------- .../unciv/ui/worldscreen/unit/UnitTable.kt | 15 +- docs/Modders/Creating-a-UI-skin.md | 3 +- 3 files changed, 311 insertions(+), 268 deletions(-) diff --git a/android/assets/Skin.json b/android/assets/Skin.json index 1c15dfc266..f333102c5a 100644 --- a/android/assets/Skin.json +++ b/android/assets/Skin.json @@ -1,278 +1,313 @@ { -com.badlogic.gdx.graphics.g2d.BitmapFont: { - button: "Nativefont" - font: "Nativefont" - title: "Nativefont" -} -com.badlogic.gdx.graphics.Color: { - black: { - r: 0 - g: 0 - b: 0 - a: 1 + com.badlogic.gdx.graphics.g2d.BitmapFont: { + button: "Nativefont" + font: "Nativefont" + title: "Nativefont" } - color: { - r: 0.2 - g: 0.3 - b: 0.5 - a: 1 + com.badlogic.gdx.graphics.Color: { + black: { + r: 0 + g: 0 + b: 0 + a: 1 + } + color: { + r: 0.2 + g: 0.3 + b: 0.5 + a: 1 + } + gray: { + r: 0.5 + g: 0.5 + b: 0.5 + a: 1 + } + dark-gray: { + a: 1.0, + b: 0.25, + g: 0.25, + r: 0.25 + } + disabled: { + a: 1.0, + b: 0.24313726, + g: 0.16862746, + r: 0.14509805 + } + highlight: { + a: 1.0, + b: 0.44705883, + g: 0.8627451, + r: 0.39607844 + } + pressed: { + r: 0.2529412 + g: 0.6 + b: 0.33313715 + a: 1 + } + selection: { + r: 0.22745098 + g: 0.59607846 + b: 0.85882354 + a: 1 + } + white: { + r: 1 + g: 1 + b: 1 + a: 1 + } + positive: { + a: 1.0, + b: 0.21960784, + g: 0.49411765, + r: 0.12156863 + } + negative: { + a: 1.0, + b: 0.0, + g: 0.03137255, + r: 0.5529412 + } + negative-highlight: { + a: 1.0, + b: 0.050980393, + g: 0.078431375, + r: 0.8666667 + } + negative-selected: { + a: 1.0, + b: 0.039215688, + g: 0.0627451, + r: 0.7764706 + } } - gray: { - r: 0.5 - g: 0.5 - b: 0.5 - a: 1 + com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: { + button-c: { + name: "RoundedEdgeRectangle" + color: color + } + button-p: { + name: "RoundedEdgeRectangle" + color: pressed + } + button-h: { + name: "RoundedEdgeRectangle" + color: highlight + } + button-disabled: { + name: "RoundedEdgeRectangle" + color: disabled + } + button-positive: { + name: "RoundedEdgeRectangle" + color: positive + } + button-negative: { + name: "RoundedEdgeRectangle" + color: negative + } + button-negative-pressed: { + name: "RoundedEdgeRectangle" + color: negative-selected + } + button-negative-hover: { + name: "RoundedEdgeRectangle" + color: negative-highlight + } + checkbox-c: { + name: "Checkbox" + color: color + } + checkbox-pressed-c: { + name: "Checkbox-pressed" + color: color + } + list-c: { + name: "RectangleWithOutline" + color: color + } + scrollbar-c: { + name: "Scrollbar" + color: color + } + select-box-c: { + name: "Select-box" + color: color + } + select-box-pressed-c: { + name: "Select-box-pressed" + color: color + } + select-box-h: { + name: "Select-box" + color: highlight + } + slider-knob-c: { + name: "Circle" + color: color + } + slider-horizontal-s: { + name: "Rectangle" + color: selection + } + slider-vertical-s: { + name: "Rectangle" + color: selection + } + slider-knob-h: { + name: "Circle" + color: highlight + } + slider-horizontal-p: { + name: "Rectangle" + color: pressed + } + slider-vertical-p: { + name: "Rectangle" + color: pressed + } + splitpane-horizontal-c: { + name: "RectangleWithOutline" + color: color + } + splitpane-vertical-c: { + name: "RectangleWithOutline" + color: color + } + textfield-c: { + name: "RoundedEdgeRectangle" + color: color + } + selection: { + name: "Rectangle" + color: selection + } + white: { + name: "Rectangle" + color: white + } } - dark-gray: { a: 1.0, b: 0.25, g: 0.25, r: 0.25 } - disabled: { a: 1.0, b: 0.24313726, g: 0.16862746, r: 0.14509805 } - highlight: { a: 1.0, b: 0.44705883, g: 0.8627451, r: 0.39607844 } - pressed: { - r: 0.2529412 - g: 0.6 - b: 0.33313715 - a: 1 + com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: { + default: { + up: button-c + down: button-p + over: button-h + } } - selection: { - r: 0.22745098 - g: 0.59607846 - b: 0.85882354 - a: 1 + com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: { + default: { + checkboxOn: checkbox-pressed-c + checkboxOff: checkbox-c + font: button + fontColor: color + downFontColor: pressed + overFontColor: highlight + } } - white: { - r: 1 - g: 1 - b: 1 - a: 1 + com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { + default: { + font: font + fontColor: color + } } - positive: { a: 1.0, b: 0.21960784, g: 0.49411765, r: 0.12156863 } - negative: { a: 1.0, b: 0.0, g: 0.03137255, r: 0.5529412 } - negative-highlight: { a: 1.0, b: 0.050980393, g: 0.078431375, r: 0.8666667 } - negative-selected: { a: 1.0, b: 0.039215688, g: 0.0627451, r: 0.7764706 } -} -com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: { - button-c: { - name: "RoundedEdgeRectangle" - color: color + com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: { + default: { + font: font + fontColorSelected: white + fontColorUnselected: white + selection: selection + background: list-c + } } - button-p: { - name: "RoundedEdgeRectangle" - color: pressed + com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: { + default: { + hScrollKnob: scrollbar-c + vScrollKnob: scrollbar-c + } } - button-h: { - name: "RoundedEdgeRectangle" - color: highlight + com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: { + default: { + font: font + fontColor: white + background: select-box-c + scrollStyle: default + listStyle: default + backgroundOver: select-box-h + backgroundOpen: select-box-pressed-c + } } - button-disabled: { - name: "RoundedEdgeRectangle" - color: disabled + com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: { + default-horizontal: { + knobOver: slider-knob-h + knobDown: slider-knob-h + background: slider-horizontal-p + knob: slider-knob-c + knobBefore: slider-horizontal-s + } + default-vertical: { + knobOver: slider-knob-h + knobDown: slider-knob-h + background: slider-vertical-p + knob: slider-knob-c + knobBefore: slider-vertical-s + } } - button-positive: { - name: "RoundedEdgeRectangle" - color: positive + com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: { + default-horizontal: { + handle: splitpane-horizontal-c + } + default-vertical: { + handle: splitpane-vertical-c + } } - button-negative: { - name: "RoundedEdgeRectangle" - color: negative + com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: { + default: { + font: button + fontColor: white + downFontColor: white + overFontColor: dark-gray + up: button-c + down: button-p + over: button-h + } + positive: { + font: button + fontColor: white + downFontColor: white + overFontColor: dark-gray + up: button-positive + down: button-p + over: button-h + } + negative: { + font: button + fontColor: white + downFontColor: white + overFontColor: white + up: button-negative + down: button-negative-pressed + over: button-negative-hover + } + disabled: { + font: button + fontColor: white + downFontColor: white + overFontColor: white + up: button-disabled + down: button-disabled + over: button-disabled + } } - button-negative-pressed: { - name: "RoundedEdgeRectangle" - color: negative-selected - } - button-negative-hover: { - name: "RoundedEdgeRectangle" - color: negative-highlight - } - checkbox-c: { - name: "Checkbox" - color: color - } - checkbox-pressed-c: { - name: "Checkbox-pressed" - color: color - } - list-c: { - name: "RectangleWithOutline" - color: color - } - scrollbar-c: { - name: "Scrollbar" - color: color - } - select-box-c: { - name: "Select-box" - color: color - } - select-box-pressed-c: { - name: "Select-box-pressed" - color: color - } - select-box-h: { - name: "Select-box" - color: highlight - } - slider-knob-c: { - name: "Circle" - color: color - } - slider-horizontal-s: { - name: "Rectangle" - color: selection - } - slider-vertical-s: { - name: "Rectangle" - color: selection - } - slider-knob-h: { - name: "Circle" - color: highlight - } - slider-horizontal-p: { - name: "Rectangle" - color: pressed - } - slider-vertical-p: { - name: "Rectangle" - color: pressed - } - splitpane-horizontal-c: { - name: "RectangleWithOutline" - color: color - } - splitpane-vertical-c: { - name: "RectangleWithOutline" - color: color - } - textfield-c: { - name: "RoundedEdgeRectangle" - color: color - } - selection: { - name: "Rectangle" - color: selection - } - white: { - name: "Rectangle" - color: white + com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: { + default: { + font: font + fontColor: white + background: textfield-c + cursor: white + selection: selection + } } } -com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: { - default: { - up: button-c - down: button-p - over: button-h - } -} -com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: { - default: { - checkboxOn: checkbox-pressed-c - checkboxOff: checkbox-c - font: button - fontColor: color - downFontColor: pressed - overFontColor: highlight - } -} -com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { - default: { - font: font - fontColor: color - } -} -com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: { - default: { - font: font - fontColorSelected: white - fontColorUnselected: white - selection: selection - background: list-c - } -} -com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: { - default: { - hScrollKnob: scrollbar-c - vScrollKnob: scrollbar-c - } -} -com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: { - default: { - font: font - fontColor: white - background: select-box-c - scrollStyle: default - listStyle: default - backgroundOver: select-box-h - backgroundOpen: select-box-pressed-c - } -} -com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: { - default-horizontal: { - knobOver: slider-knob-h - knobDown: slider-knob-h - background: slider-horizontal-p - knob: slider-knob-c - knobBefore: slider-horizontal-s - } - default-vertical: { - knobOver: slider-knob-h - knobDown: slider-knob-h - background: slider-vertical-p - knob: slider-knob-c - knobBefore: slider-vertical-s - } -} -com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: { - default-horizontal: { - handle: splitpane-horizontal-c - } - default-vertical: { - handle: splitpane-vertical-c - } -} -com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: { - default: { - font: button - fontColor: white - downFontColor: white - overFontColor: dark-gray - up: button-c - down: button-p - over: button-h - } - positive: { - font: button - fontColor: white - downFontColor: white - overFontColor: dark-gray - up: button-positive - down: button-p - over: button-h - } - negative: { - font: button - fontColor: white - downFontColor: white - overFontColor: white - up: button-negative - down: button-negative-pressed - over: button-negative-hover - } - disabled: { - font: button - fontColor: white - downFontColor: white - overFontColor: white - up: button-disabled - down: button-disabled - over: button-disabled - } -} -com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: { - default: { - font: font - fontColor: white - background: textfield-c - cursor: white - selection: selection - } -} -} diff --git a/core/src/com/unciv/ui/worldscreen/unit/UnitTable.kt b/core/src/com/unciv/ui/worldscreen/unit/UnitTable.kt index 9f9fda8603..c50509fad8 100644 --- a/core/src/com/unciv/ui/worldscreen/unit/UnitTable.kt +++ b/core/src/com/unciv/ui/worldscreen/unit/UnitTable.kt @@ -4,6 +4,7 @@ import com.badlogic.gdx.Gdx import com.badlogic.gdx.Input import com.badlogic.gdx.scenes.scene2d.Actor import com.badlogic.gdx.scenes.scene2d.Touchable +import com.badlogic.gdx.scenes.scene2d.ui.Image import com.badlogic.gdx.scenes.scene2d.ui.Table import com.badlogic.gdx.scenes.scene2d.ui.VerticalGroup import com.unciv.Constants @@ -21,12 +22,11 @@ import com.unciv.ui.pickerscreens.UnitRenamePopup import com.unciv.ui.utils.BaseScreen import com.unciv.ui.utils.UnitGroup import com.unciv.ui.utils.extensions.addSeparator +import com.unciv.ui.utils.extensions.center import com.unciv.ui.utils.extensions.darken import com.unciv.ui.utils.extensions.onClick import com.unciv.ui.utils.extensions.toLabel import com.unciv.ui.worldscreen.WorldScreen -import com.unciv.utils.Log -import kotlin.system.measureTimeMillis class UnitTable(val worldScreen: WorldScreen) : Table() { private val prevIdleUnitButton = IdleUnitButton(this,worldScreen.mapHolder,true) @@ -64,13 +64,18 @@ class UnitTable(val worldScreen: WorldScreen) : Table() { var selectedUnitHasChanged = false val separator: Actor + var bg = Image(BaseScreen.skinStrings.getUiBackground("WorldScreen/UnitTable", + BaseScreen.skinStrings.roundedEdgeRectangleMidShape, + BaseScreen.skinStrings.skinConfig.baseColor.darken(0.5f))) + + init { pad(5f) touchable = Touchable.enabled background = BaseScreen.skinStrings.getUiBackground( - "WorldScreen/UnitTable", - tintColor = BaseScreen.skinStrings.skinConfig.baseColor.darken(0.5f) + "WorldScreen/UnitTable", BaseScreen.skinStrings.roundedEdgeRectangleMidShape ) + addActor(bg) promotionsTable.touchable = Touchable.enabled @@ -259,6 +264,8 @@ class UnitTable(val worldScreen: WorldScreen) : Table() { } pack() + bg.setSize(width-3f, height-3f) + bg.center(this) selectedUnitHasChanged = false } diff --git a/docs/Modders/Creating-a-UI-skin.md b/docs/Modders/Creating-a-UI-skin.md index 7299de7c38..d68de26d0f 100644 --- a/docs/Modders/Creating-a-UI-skin.md +++ b/docs/Modders/Creating-a-UI-skin.md @@ -102,7 +102,8 @@ These shapes are used all over Unciv and can be replaced to make a lot of UI ele | WorldScreen/ | PickTechButton | roundedEdgeRectangle | | | WorldScreen/ | TileInfoTable | null | | | WorldScreen/ | TutorialTaskTable | null | | -| WorldScreen/ | UnitTable | null | | +| WorldScreen/ | UnitTable | roundedEdgeRectangleMid | | +| WorldScreen/ | UnitTable | roundedEdgeRectangleMid | | | WorldScreen/CityButton/ | AirUnitTable | roundedEdgeRectangle | | | WorldScreen/CityButton/ | InfluenceBar | null | | | WorldScreen/Minimap/ | Background | null | |