Skip to content

Commit

Permalink
various mobile sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshtynjala
joshtynjala committed Feb 23, 2024
1 parent ba57e3e commit 4e49858
Show file tree
Hide file tree
Showing 24 changed files with 322 additions and 95 deletions.
20 changes: 17 additions & 3 deletions src/com/feathersui/themes/minimal/BaseMinimalTheme.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal;

import feathers.utils.DeviceUtil;
import feathers.skins.RectangleSkin;
import com.feathersui.themes.minimal.skins.MinimalRectangleSkin;
import feathers.style.IDarkModeTheme;
Expand Down Expand Up @@ -93,9 +94,9 @@ class BaseMinimalTheme extends ClassVariantTheme implements IDarkModeTheme {

private var embedFonts:Bool = true;
private var fontName:String = "PF Ronda Seven";
private var fontSize:Int = 8;
private var headingFontSize:Int = 9;
private var detailFontSize:Int = 7;
private var fontSize:Int;
private var headingFontSize:Int;
private var detailFontSize:Int;

private var _darkMode:Bool = false;

Expand All @@ -120,6 +121,19 @@ class BaseMinimalTheme extends ClassVariantTheme implements IDarkModeTheme {
super();
_darkMode = darkMode;
refreshStyle();
refreshFontSize();
}

private function refreshFontSize():Void {
if (DeviceUtil.isDesktop()) {
fontSize = 8;
headingFontSize = 9;
detailFontSize = 7;
} else {
fontSize = 12;
headingFontSize = 13;
detailFontSize = 11;
}
}

private function refreshStyle():Void {
Expand Down
4 changes: 3 additions & 1 deletion src/com/feathersui/themes/minimal/components/MinimalButtonBarStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
import feathers.controls.ButtonBar;
import feathers.layout.HorizontalLayout;
import feathers.style.Theme;
Expand All @@ -30,9 +31,10 @@ class MinimalButtonBarStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(ButtonBar, null) == null) {
styleProvider.setStyleFunction(ButtonBar, null, function(buttonBar:ButtonBar):Void {
var isDesktop = DeviceUtil.isDesktop();
if (buttonBar.layout == null) {
var layout = new HorizontalLayout();
layout.gap = 3.0;
layout.gap = isDesktop ? 3.0 : 6.0;
buttonBar.layout = layout;
}
});
Expand Down
13 changes: 9 additions & 4 deletions src/com/feathersui/themes/minimal/components/MinimalButtonStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
import com.feathersui.themes.minimal.skins.MinimalButtonSkin;
import feathers.controls.Button;
import feathers.style.Theme;
Expand All @@ -27,10 +28,16 @@ class MinimalButtonStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(Button, null) == null) {
styleProvider.setStyleFunction(Button, null, function(button:Button):Void {
var isDesktop = DeviceUtil.isDesktop();
if (button.backgroundSkin == null) {
var backgroundSkin = new MinimalButtonSkin(theme);
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 40.0;
}
button.backgroundSkin = backgroundSkin;
}
if (button.focusRectSkin == null) {
Expand All @@ -45,8 +52,6 @@ class MinimalButtonStyles {
button.disabledTextFormat = theme.getDisabledTextFormat();
}
button.embedFonts = theme.embedFonts;
button.paddingTop = 1.0;
button.paddingBottom = 1.0;
button.paddingLeft = 2.0;
button.paddingRight = 2.0;
button.gap = 2.0;
Expand Down
13 changes: 9 additions & 4 deletions src/com/feathersui/themes/minimal/components/MinimalComboBoxStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
import com.feathersui.themes.minimal.skins.MinimalButtonSkin;
import feathers.controls.Button;
import feathers.controls.ComboBox;
Expand All @@ -32,10 +33,16 @@ class MinimalComboBoxStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(Button, ComboBox.CHILD_VARIANT_BUTTON) == null) {
styleProvider.setStyleFunction(Button, ComboBox.CHILD_VARIANT_BUTTON, function(button:Button):Void {
var isDesktop = DeviceUtil.isDesktop();
if (button.backgroundSkin == null) {
var backgroundSkin = new MinimalButtonSkin(theme);
backgroundSkin.width = 20.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 16.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 32.0;
backgroundSkin.height = 32.0;
}
button.backgroundSkin = backgroundSkin;
}
if (button.textFormat == null) {
Expand All @@ -45,8 +52,6 @@ class MinimalComboBoxStyles {
button.disabledTextFormat = theme.getDisabledTextFormat();
}
button.embedFonts = theme.embedFonts;
button.paddingTop = 1.0;
button.paddingBottom = 1.0;
button.paddingLeft = 2.0;
button.paddingRight = 2.0;
button.gap = 2.0;
Expand Down
11 changes: 9 additions & 2 deletions src/com/feathersui/themes/minimal/components/MinimalGridViewRowRendererStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
#if (feathersui >= "1.3.0")
import com.feathersui.themes.minimal.skins.MinimalRectangleSkin;
import feathers.controls.ToggleButtonState;
Expand All @@ -30,15 +31,21 @@ class MinimalGridViewRowRendererStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(GridViewRowRenderer, null) == null) {
styleProvider.setStyleFunction(GridViewRowRenderer, null, function(rowRenderer:GridViewRowRenderer):Void {
var isDesktop = DeviceUtil.isDesktop();
if (rowRenderer.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.listDefaultColor);
backgroundSkin.selectedFill = SolidColor(theme.listSelectedColor);
backgroundSkin.setFillForState(ToggleButtonState.HOVER(false), SolidColor(theme.listRollOverColor));
backgroundSkin.setFillForState(ToggleButtonState.DOWN(false), SolidColor(theme.listSelectedColor));
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 40.0;
}
rowRenderer.backgroundSkin = backgroundSkin;
}
});
Expand Down
42 changes: 32 additions & 10 deletions src/com/feathersui/themes/minimal/components/MinimalGridViewStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,24 +69,36 @@ class MinimalGridViewStyles {
gridView.filters = [theme.getShadow(2.0, true)];
}
function styleGridViewWithBorderVariant(gridView:GridView):Void {
var isDesktop = DeviceUtil.isDesktop();
if (gridView.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = SolidColor(1.0, 0x000000, 0.1);
backgroundSkin.fill = SolidColor(theme.listDefaultColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 32.0;
}
gridView.backgroundSkin = backgroundSkin;
}
gridView.setPadding(1.0);
setDefaultStyles(gridView);
}
function styleGridViewWithBorderlessVariant(gridView:GridView):Void {
var isDesktop = DeviceUtil.isDesktop();
if (gridView.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.listDefaultColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 32.0;
}
gridView.backgroundSkin = backgroundSkin;
}
setDefaultStyles(gridView);
Expand All @@ -110,14 +122,20 @@ class MinimalGridViewStyles {
#if (feathersui >= "1.3.0")
if (styleProvider.getStyleFunction(ItemRenderer, GridView.CHILD_VARIANT_CELL_RENDERER) == null) {
styleProvider.setStyleFunction(ItemRenderer, GridView.CHILD_VARIANT_CELL_RENDERER, function(itemRenderer:ItemRenderer):Void {
var isDesktop = DeviceUtil.isDesktop();
if (itemRenderer.backgroundSkin == null) {
// a transparent background skin ensures that CELL_TRIGGER
// gets dispatched
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.fill = SolidColor(0xff00ff, 0.0);
backgroundSkin.border = None;
backgroundSkin.width = 20.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 40.0;
}
itemRenderer.backgroundSkin = backgroundSkin;
}
// except for the background skin, use other default styles
Expand Down Expand Up @@ -151,12 +169,18 @@ class MinimalGridViewStyles {
}
if (styleProvider.getStyleFunction(ItemRenderer, GridView.CHILD_VARIANT_HEADER_RENDERER) == null) {
styleProvider.setStyleFunction(ItemRenderer, GridView.CHILD_VARIANT_HEADER_RENDERER, function(itemRenderer:ItemRenderer):Void {
var isDesktop = DeviceUtil.isDesktop();
if (itemRenderer.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.listHeadingColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 40.0;
}
itemRenderer.backgroundSkin = backgroundSkin;
}
if (itemRenderer.textFormat == null) {
Expand All @@ -167,8 +191,6 @@ class MinimalGridViewStyles {
}
itemRenderer.embedFonts = theme.embedFonts;
itemRenderer.horizontalAlign = LEFT;
itemRenderer.paddingTop = 1.0;
itemRenderer.paddingBottom = 1.0;
itemRenderer.paddingLeft = 5.0;
itemRenderer.paddingRight = 5.0;
itemRenderer.gap = 2.0;
Expand Down
32 changes: 24 additions & 8 deletions src/com/feathersui/themes/minimal/components/MinimalGroupListViewStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,36 @@ class MinimalGroupListViewStyles {
listView.filters = [theme.getShadow(2.0, true)];
}
function styleGroupListViewWithBorderVariant(listView:GroupListView):Void {
var isDesktop = DeviceUtil.isDesktop();
if (listView.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = SolidColor(1.0, 0x000000, 0.1);
backgroundSkin.fill = SolidColor(theme.listDefaultColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 32.0;
}
listView.backgroundSkin = backgroundSkin;
}
listView.setPadding(1.0);
setDefaultStyles(listView);
}
function styleGroupListViewWithBorderlessVariant(listView:GroupListView):Void {
var isDesktop = DeviceUtil.isDesktop();
if (listView.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.listDefaultColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 32.0;
}
listView.backgroundSkin = backgroundSkin;
}
setDefaultStyles(listView);
Expand All @@ -86,12 +98,18 @@ class MinimalGroupListViewStyles {
}
if (styleProvider.getStyleFunction(ItemRenderer, GroupListView.CHILD_VARIANT_HEADER_RENDERER) == null) {
styleProvider.setStyleFunction(ItemRenderer, GroupListView.CHILD_VARIANT_HEADER_RENDERER, function(itemRenderer:ItemRenderer):Void {
var isDesktop = DeviceUtil.isDesktop();
if (itemRenderer.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.listHeadingColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 20.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 40.0;
}
itemRenderer.backgroundSkin = backgroundSkin;
}
if (itemRenderer.textFormat == null) {
Expand All @@ -102,8 +120,6 @@ class MinimalGroupListViewStyles {
}
itemRenderer.embedFonts = theme.embedFonts;
itemRenderer.horizontalAlign = LEFT;
itemRenderer.paddingTop = 1.0;
itemRenderer.paddingBottom = 1.0;
itemRenderer.paddingLeft = 5.0;
itemRenderer.paddingRight = 5.0;
itemRenderer.gap = 2.0;
Expand Down
6 changes: 5 additions & 1 deletion src/com/feathersui/themes/minimal/components/MinimalHScrollBarStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
import com.feathersui.themes.minimal.skins.MinimalTriangleSkin;
import com.feathersui.themes.minimal.skins.MinimalButtonSkin;
import feathers.controls.Button;
Expand All @@ -30,6 +31,7 @@ class MinimalHScrollBarStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(HScrollBar, null) == null) {
styleProvider.setStyleFunction(HScrollBar, null, function(scrollBar:HScrollBar):Void {
var isDesktop = DeviceUtil.isDesktop();
if (scrollBar.trackSkin == null) {
var trackSkin = theme.getBackSkin();
trackSkin.width = 100.0;
Expand All @@ -43,7 +45,9 @@ class MinimalHScrollBarStyles {
scrollBar.thumbSkin = thumbSkin;
}
#if (feathersui >= "1.3.0")
scrollBar.showDecrementAndIncrementButtons = true;
if (isDesktop) {
scrollBar.showDecrementAndIncrementButtons = true;
}
#end
scrollBar.paddingLeft = 1.0;
scrollBar.paddingRight = 1.0;
Expand Down
11 changes: 9 additions & 2 deletions src/com/feathersui/themes/minimal/components/MinimalHeaderStyles.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

package com.feathersui.themes.minimal.components;

import feathers.utils.DeviceUtil;
import com.feathersui.themes.minimal.skins.MinimalRectangleSkin;
import feathers.controls.Header;
import feathers.style.Theme;
Expand All @@ -28,12 +29,18 @@ class MinimalHeaderStyles {
var styleProvider = theme.styleProvider;
if (styleProvider.getStyleFunction(Header, null) == null) {
styleProvider.setStyleFunction(Header, null, function(header:Header):Void {
var isDesktop = DeviceUtil.isDesktop();
if (header.backgroundSkin == null) {
var backgroundSkin = new MinimalRectangleSkin();
backgroundSkin.border = None;
backgroundSkin.fill = SolidColor(theme.panelColor);
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
if (isDesktop) {
backgroundSkin.width = 100.0;
backgroundSkin.height = 16.0;
} else {
backgroundSkin.width = 120.0;
backgroundSkin.height = 32.0;
}
header.backgroundSkin = backgroundSkin;
}
if (header.textFormat == null) {
Expand Down
Loading

0 comments on commit 4e49858

Please sign in to comment.