UI stuff

core/assets/sprites/uiskin.json

@@ -36,17 +36,17 @@
       name: whiteui,
       color: { r: 0, g: 0, b: 0, a: 0 }
     },
-    flat: {
+    flat-trans: {
       name: whiteui,
       color: { r: 0.0, g: 0.0, b: 0.0, a: 0.6 }
     },
+    flat: {
+      name: whiteui,
+      color: { r: 0.0, g: 0.0, b: 0.0, a: 1 }
+    },
     flat-over: {
       name: whiteui,
-      color: { hex: "#ffffff82" }
+      color: { hex: "#454545ff" }
-    },
-    flat-down: {
-      name: whiteui,
-      color: { hex: "#ffd37fff" }
     }
   },
   ButtonStyle: {
@@ -71,12 +71,12 @@
       up: button
     },
     node: {
-      disabled: content-background-locked,
+      disabled: button,
       font: default-font,
       fontColor: white,
       disabledFontColor: gray,
-      up: content-background,
+      up: button-over,
-      over: content-background-over
+      over: button-down
     },
     right: {
       over: button-right-over,
@@ -169,8 +169,8 @@
       imageUpColor: white
     },
     node: {
-      up: content-background,
+      up: button-over,
-      over: content-background-over
+      over: button-down
     },
     right: {
       over: button-right-over,
@@ -224,6 +224,12 @@
       up: flat,
       over: flat-over
     },
+    clear-toggle-trans: {
+      down: flat-down,
+      checked: flat-down,
+      up: flat-trans,
+      over: flat-over
+    },
     clear-toggle-partial: {
       down: flat-down,
       checked: flat-down,

core/src/io/anuke/mindustry/core/UI.java

@@ -14,6 +14,7 @@ import io.anuke.arc.math.Interpolation;
 import io.anuke.arc.scene.*;
 import io.anuke.arc.scene.actions.Actions;
 import io.anuke.arc.scene.event.Touchable;
+import io.anuke.arc.scene.style.NinePatchDrawable;
 import io.anuke.arc.scene.ui.*;
 import io.anuke.arc.scene.ui.TextField.TextFieldFilter;
 import io.anuke.arc.scene.ui.Tooltip.Tooltips;
@@ -26,7 +27,7 @@ import io.anuke.mindustry.graphics.Pal;
 import io.anuke.mindustry.ui.dialogs.*;
 import io.anuke.mindustry.ui.fragments.*;
 
-import static io.anuke.arc.scene.actions.Actions.*;
+import static io.anuke.arc.scene.actions.Actions.sequence;
 import static io.anuke.mindustry.Vars.*;
 
 public class UI implements ApplicationListener{
@@ -70,6 +71,14 @@ public class UI implements ApplicationListener{
         Skin skin = new Skin(Core.atlas);
         generateFonts(skin);
         skin.load(Core.files.internal("sprites/uiskin.json"));
+        NinePatchDrawable draw = (NinePatchDrawable)skin.getDrawable("flat-down");
+        draw.setMinWidth(0);
+        draw.setMinHeight(0);
+        draw.setTopHeight(0);
+        draw.setRightWidth(0);
+        draw.setBottomHeight(0);
+        draw.setLeftWidth(0);
+        //TODO fix
 
         for(BitmapFont font : skin.getAll(BitmapFont.class).values()){
             font.setUseIntegerPositions(true);

core/src/io/anuke/mindustry/graphics/MenuRenderer.java

@@ -23,7 +23,7 @@ import static io.anuke.mindustry.Vars.*;
 
 public class MenuRenderer implements Disposable{
     private static final float darkness = 0.3f;
-    private final int width = !mobile ? 90 : 60, height = !mobile ? 40 : 50;
+    private final int width = !mobile ? 100 : 60, height = !mobile ? 50 : 40;
 
     private int cacheFloor, cacheWall;
     private Camera camera = new Camera();

core/src/io/anuke/mindustry/graphics/Pal.java

@@ -52,7 +52,7 @@ public class Pal{
     bar = Color.SLATE,
     accent = Color.valueOf("ffd37f"),
     stat = Color.valueOf("ffd37f"),
-    locked = Color.valueOf("989aa4"),
+    locked = Color.valueOf("454545"),
     accentBack = Color.valueOf("d4816b"),
     place = Color.valueOf("6335f8"),
     remove = Color.valueOf("e55454"),

core/src/io/anuke/mindustry/ui/dialogs/LanguageDialog.java

@@ -29,7 +29,7 @@ public class LanguageDialog extends FloatingDialog{
         ButtonGroup<TextButton> group = new ButtonGroup<>();
 
         for(Locale loc : locales){
-            TextButton button = new TextButton(Strings.capitalize(loc.getDisplayName(loc)), "toggle");
+            TextButton button = new TextButton(Strings.capitalize(loc.getDisplayName(loc)), "clear-toggle");
             button.clicked(() -> {
                 if(getLocale().equals(loc)) return;
                 Core.settings.put("locale", loc.toString());
@@ -37,7 +37,7 @@ public class LanguageDialog extends FloatingDialog{
                 Log.info("Setting locale: {0}", loc.toString());
                 ui.showInfo("$language.restart");
             });
-            langs.add(button).group(group).update(t -> t.setChecked(loc.equals(getLocale()))).size(400f, 50f).pad(2).row();
+            langs.add(button).group(group).update(t -> t.setChecked(loc.equals(getLocale()))).size(400f, 50f).row();
         }
 
         cont.add(pane);

core/src/io/anuke/mindustry/ui/dialogs/TechTreeDialog.java

@@ -192,7 +192,7 @@ public class TechTreeDialog extends FloatingDialog{
                 button.update(() -> {
                     float offset = (Core.graphics.getHeight() % 2) / 2f;
                     button.setPosition(node.x + panX + width / 2f, node.y + panY + height / 2f + offset, Align.center);
-                    button.getStyle().up = Core.scene.skin.getDrawable(!locked(node.node) ? "content-background" : !data.hasItems(node.node.requirements) ? "content-background-noitems" : "content-background-locked");
+                    button.getStyle().up = Core.scene.skin.getDrawable(!locked(node.node) ? "button-over" : !data.hasItems(node.node.requirements) ? "button-red" : "button");
                     ((TextureRegionDrawable)button.getStyle().imageUp)
                     .setRegion(node.visible ? node.node.block.icon(Icon.medium) : Core.atlas.find("icon-locked"));
                     button.getImage().setColor(!locked(node.node) ? Color.WHITE : Color.GRAY);
@@ -249,11 +249,12 @@ public class TechTreeDialog extends FloatingDialog{
             infoTable.update(() -> infoTable.setPosition(button.getX() + button.getWidth(), button.getY() + button.getHeight(), Align.topLeft));
 
             infoTable.left();
+            infoTable.background("button").margin(8f);
 
-            infoTable.table("content-background", b -> {
+            infoTable.table(b -> {
                 b.margin(0).left().defaults().left();
 
-                b.addImageButton("icon-info", "node", iconsize, () -> ui.content.show(node.block)).growY().width(50f);
+                b.addImageButton("icon-info-small", "clear", iconsizesmall, () -> ui.content.show(node.block)).growY().width(50f);
                 b.add().grow();
                 b.table(desc -> {
                     desc.left().defaults().left();
@@ -287,7 +288,7 @@ public class TechTreeDialog extends FloatingDialog{
 
             infoTable.row();
             if(node.block.description != null){
-                infoTable.table("dialogDim", t -> t.margin(3f).left().labelWrap(node.block.description).color(Color.LIGHT_GRAY).growX()).fillX();
+                infoTable.table(t -> t.margin(3f).left().labelWrap(node.block.description).color(Color.LIGHT_GRAY).growX()).fillX();
             }
 
 
@@ -305,7 +306,7 @@ public class TechTreeDialog extends FloatingDialog{
                 for(TechTreeNode child : node.children){
                     if(!child.visible) continue;
 
-                    Lines.stroke(Unit.dp.scl(3f), locked(node.node) || locked(child.node) ? Pal.locked : Pal.accent);
+                    Lines.stroke(Unit.dp.scl(4f), locked(node.node) || locked(child.node) ? Pal.locked : Pal.accent);
                     Lines.line(node.x + offsetX, node.y + offsetY, child.x + offsetX, child.y + offsetY);
                 }
             }

core/src/io/anuke/mindustry/ui/fragments/MenuFragment.java

@@ -4,7 +4,9 @@ import io.anuke.arc.Core;
 import io.anuke.arc.Events;
 import io.anuke.arc.graphics.Texture;
 import io.anuke.arc.graphics.g2d.Draw;
+import io.anuke.arc.math.Interpolation;
 import io.anuke.arc.scene.Group;
+import io.anuke.arc.scene.actions.Actions;
 import io.anuke.arc.scene.event.Touchable;
 import io.anuke.arc.scene.ui.Button;
 import io.anuke.arc.scene.ui.layout.Table;
@@ -154,6 +156,7 @@ public class MenuFragment extends Fragment{
 
         container.table(background, t -> {
             submenu = t;
+            t.getColor().a = 0f;
             t.top();
             t.defaults().width(width).height(70f);
             t.visible(() -> !t.getChildren().isEmpty());
@@ -161,6 +164,21 @@ public class MenuFragment extends Fragment{
         }).width(width).growY();
     }
 
+    private void fadeInMenu(){
+        submenu.clearActions();
+        submenu.actions(Actions.alpha(1f, 0.15f, Interpolation.fade));
+    }
+
+    private void fadeOutMenu(){
+        //nothing to fade out
+        if(submenu.getChildren().isEmpty()){
+            return;
+        }
+
+        submenu.clearActions();
+        submenu.actions(Actions.alpha(1f), Actions.alpha(0f, 0.2f, Interpolation.fade), Actions.run(() -> submenu.clearChildren()));
+    }
+
     private void buttons(Table t, Buttoni... buttons){
         for(Buttoni b : buttons){
             Button[] out = {null};
@@ -168,18 +186,19 @@ public class MenuFragment extends Fragment{
                     iconsizesmall, () -> {
                 if(currentMenu == out[0]){
                     currentMenu = null;
-                    submenu.clearChildren();
+                    fadeOutMenu();
                 }else{
                     if(b.submenu != null){
                         currentMenu = out[0];
                         submenu.clearChildren();
+                        fadeInMenu();
                         //correctly offset the button
                         submenu.add().height(Core.graphics.getHeight() - out[0].getY(Align.topLeft));
                         submenu.row();
                         buttons(submenu, b.submenu);
                     }else{
                         currentMenu = null;
-                        submenu.clearChildren();
+                        fadeOutMenu();
                         b.runnable.run();
                     }
                 }

core/src/io/anuke/mindustry/ui/fragments/PlacementFragment.java

@@ -245,7 +245,7 @@ public class PlacementFragment extends Fragment{
                     });
                 }).colspan(3).fillX().visible(() -> getSelected() != null || tileDisplayBlock() != null).touchable(Touchable.enabled);
                 frame.row();
-                frame.addImage("blank").color(Pal.accent).colspan(3).height(3).growX();
+                frame.addImage("blank").color(Pal.locked).colspan(3).height(4).growX();
                 frame.row();
                 frame.table("pane-2", blocksSelect -> {
                     blocksSelect.margin(4).marginTop(0);
@@ -269,11 +269,11 @@ public class PlacementFragment extends Fragment{
                         if(f++ % 2 == 0) categories.row();
 
                         if(categoryEmpty[cat.ordinal()]){
-                            categories.addImage("flat");
+                            categories.addImage("flat-trans");
                             continue;
                         }
 
-                        categories.addImageButton("icon-" + cat.name() + "-med", "clear-toggle", iconsizemed, () -> {
+                        categories.addImageButton("icon-" + cat.name() + "-med", "clear-toggle-trans", iconsizemed, () -> {
                             currentCategory = cat;
                             rebuildCategory.run();
                         }).group(group).update(i -> i.setChecked(currentCategory == cat));