titanium-sdk
titanium-sdk copied to clipboard
Published
20 hours ago •
tidev
tidev
feat(android): initial support for Material You themeing
- Initial support for Material You dynamic theming
- Colors obtained from platform/frameworks/.../colors_device_defaults.xml to match Google's behavior
NOTES
- This does not modify the border radius of Cards, Dialogs, ProgressBars. I expect a revision of Material Components to support the new aesthetic in Android 12
TEST CASE
SHOW
const win = Ti.UI.createWindow();
const table = Ti.UI.createTableView({ touchFeedback: false });
function section_dayNight() {
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection();
const view = Ti.UI.createView({
layout: 'horizontal',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
const center = Ti.UI.createView({
height: 60
});
const label = Ti.UI.createLabel({
text: 'Toggle dark theme: '
});
const toggle = Ti.UI.createSwitch({
value: false
});
toggle.addEventListener('change', e => {
if (Ti.UI.overrideUserInterfaceStyle != Ti.UI.USER_INTERFACE_STYLE_DARK) {
Ti.UI.overrideUserInterfaceStyle = Ti.UI.USER_INTERFACE_STYLE_DARK;
} else {
Ti.UI.overrideUserInterfaceStyle = Ti.UI.USER_INTERFACE_STYLE_UNSPECIFIED;
}
});
view.add([label, toggle]);
center.add(view);
row.add(center);
section.add(row);
return section;
}
function section_buttons() {
const title = Ti.UI.createLabel({
text: 'Button',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
view.add([
Ti.UI.createButton({
top: 10,
title: 'BUTTON_STYLE_OPTION_POSITIVE',
style: Ti.UI.BUTTON_STYLE_OPTION_POSITIVE
}),
Ti.UI.createButton({
top: 5,
title: 'BUTTON_STYLE_OPTION_NEGATIVE',
style: Ti.UI.BUTTON_STYLE_OPTION_NEGATIVE
}),
Ti.UI.createButton({
top: 5,
title: 'BUTTON_STYLE_OPTION_NEUTRAL',
style: Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL
}),
Ti.UI.createButton({
top: 5,
title: 'BUTTON_STYLE_OUTLINED',
style: Ti.UI.BUTTON_STYLE_OUTLINED
}),
Ti.UI.createButton({
top: 5,
title: 'BUTTON_STYLE_TEXT',
style: Ti.UI.BUTTON_STYLE_TEXT
}),
Ti.UI.createButton({
top: 5,
title: 'BUTTON_STYLE_FILLED',
style: Ti.UI.BUTTON_STYLE_FILLED
})
]);
row.add(view);
section.add(row);
return section;
}
function section_textFields() {
const title = Ti.UI.createLabel({
text: 'TextField',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
view.add([
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_FILLED',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_FILLED
}),
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_BEZEL',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL
}),
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_LINE',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_LINE
}),
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_ROUNDED',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
}),
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_NONE',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
}),
Ti.UI.createTextField({
top: 10,
left: 10,
right: 10,
hintText: 'INPUT_BORDERSTYLE_UNDERLINED',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_UNDERLINED
})
]);
row.add(view);
section.add(row);
return section;
}
function section_switch() {
const title = Ti.UI.createLabel({
text: 'Switch',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
view.add([
Ti.UI.createSwitch({
style: Ti.UI.SWITCH_STYLE_CHECKBOX,
title: 'SWITCH_STYLE_CHECKBOX',
top: 10
}),
Ti.UI.createSwitch({
style: Ti.UI.SWITCH_STYLE_SLIDER,
title: 'SWITCH_STYLE_SLIDER',
top: 10
}),
Ti.UI.createSwitch({
style: Ti.UI.SWITCH_STYLE_TOGGLE_BUTTON,
title: 'SWITCH_STYLE_TOGGLE_BUTTON',
top: 10
}),
Ti.UI.createSwitch({
style: Ti.UI.SWITCH_STYLE_CHIP,
title: 'SWITCH_STYLE_CHIP',
top: 10
})
]);
row.add(view);
section.add(row);
return section;
}
function section_alert() {
const title = Ti.UI.createLabel({
text: 'Dialog',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
const button_alert = Ti.UI.createButton({
top: 10,
title: 'alert()'
});
const button_alertDialog = Ti.UI.createButton({
top: 10,
title: 'Ti.UI.AlertDialog'
});
const button_optionDialog = Ti.UI.createButton({
top: 10,
title: 'Ti.UI.OptionDialog'
});
button_alert.addEventListener('click', e => {
alert('This is an alert.');
});
button_alertDialog.addEventListener('click', e => {
Ti.UI.createAlertDialog({
cancel: 1,
buttonNames: ['Okay', 'Cancel'],
message: 'This is an Ti.UI.AlertDialog.',
title: 'Ti.UI.AlertDialog'
}).show();
});
button_optionDialog.addEventListener('click', e => {
Ti.UI.createOptionDialog({
cancel: 1,
options: ['Okay', 'Cancel'],
selectedIndex: 0,
destructive: 1,
title: 'Ti.UI.OptionDialog'
}).show();
});
view.add([
button_alert,
button_alertDialog,
button_optionDialog
]);
row.add(view);
section.add(row);
return section;
}
function section_cardView() {
const title = Ti.UI.createLabel({
text: 'CardView',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
if (Ti.Platform.osname === 'android') {
const card = Ti.UI.Android.createCardView({
layout: 'vertical',
padding: 16,
top: 10,
left: 10,
right: 10,
});
card.add(Ti.UI.createLabel({
text: 'This is a Ti.UI.Android.CardView',
maxLines: 1,
width: Ti.UI.FILL
}));
view.add([card]);
}
row.add(view);
section.add(row);
return section;
}
function section_activityIndicator() {
const title = Ti.UI.createLabel({
text: 'ActivityIndicator',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
function createIndicator(message, style) {
const indicator = Ti.UI.createActivityIndicator({
message: message,
style: style,
top: 10
});
indicator.show();
return indicator;
}
view.add([
createIndicator('PLAIN', Ti.UI.ActivityIndicatorStyle.PLAIN),
createIndicator('BIG', Ti.UI.ActivityIndicatorStyle.BIG),
createIndicator('DARK', Ti.UI.ActivityIndicatorStyle.DARK),
createIndicator('BIG_DARK', Ti.UI.ActivityIndicatorStyle.BIG_DARK),
]);
row.add(view);
section.add(row);
return section;
}
function section_progressBar() {
const title = Ti.UI.createLabel({
text: 'ProgressBar',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
const progressBar = Ti.UI.createProgressBar({
top: 10,
min: 0,
max: 100,
width: '80%',
animated: false
});
const progressBar_animated = Ti.UI.createProgressBar({
top: 10,
min: 0,
max: 100,
width: '80%'
});
setInterval(_ => {
if (progressBar.value < progressBar.max) {
progressBar.value++;
progressBar.message = `${progressBar.value}%`;
} else {
progressBar.value = 0;
}
if (progressBar_animated.value < progressBar_animated.max) {
progressBar_animated.value++;
progressBar_animated.message = `${progressBar_animated.value}% (animated: true)`;
} else {
progressBar_animated.value = 0;
}
}, 50);
view.add([
progressBar,
progressBar_animated
]);
row.add(view);
section.add(row);
return section;
}
function section_picker() {
const title = Ti.UI.createLabel({
text: 'Picker',
left: 10,
font: {
fontSize: 26
}
});
const row = Ti.UI.createTableViewRow();
const section = Ti.UI.createTableViewSection({
headerView: title
});
const view = Ti.UI.createView({
layout: 'vertical',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
bottom: 10
});
const button_date = Ti.UI.createButton({
top: 10,
title: 'Date'
});
const button_time = Ti.UI.createButton({
top: 10,
title: 'Time'
});
button_date.addEventListener('click', e => {
const picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE,
minDate: new Date(2020, 8, 10),
maxDate: new Date(2021, 1, 24),
value: new Date(2021, 0, 1)
});
picker.showDatePickerDialog({
title: 'Date Picker'
});
});
button_time.addEventListener('click', e => {
const picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_TIME,
value: new Date(2021, 0, 1, 12)
});
picker.showTimePickerDialog({
title: 'Time Picker'
});
});
view.add([
button_date,
button_time
]);
row.add(view);
section.add(row);
return section;
}
table.data = [
section_dayNight(),
section_buttons(),
section_textFields(),
section_alert(),
section_cardView(),
section_switch(),
section_activityIndicator(),
section_progressBar(),
section_picker()
];
win.add(table);
win.open();
| Fails | |
|---|---|
| :no_entry_sign: | Tests have failed, see below for more information. |
| :no_entry_sign: |
Test suite crashed on iOS simulator. Please see the crash log for more details. |
| Messages | |
|---|---|
| :book: | :fist: The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready. |
| :book: | :x: 1 tests have failed There are 1 tests failing and 680 skipped out of 11868 total tests. |
Tests:
| Classname | Name | Time | Error |
|---|---|---|---|
| ios.iphone.Titanium.Filesystem.File | .remoteBackup assigning Boolean value doesn't throw (14.4.0) | 2.227 | Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js) run@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9258:22 processImmediateQueue@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9321:18 drainQueues@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9298:52 |
Generated by :no_entry_sign: dangerJS against 3bef9948a7cd9a9205707cad0740108e18bedbb6
The Material Compontents are currently in v1.5.0 Alpha, which adds support for Material 3 (the implementation of Material You). Happy to help testing once thats ready!
@hansemannn , we're already aware of this. It's been in alpha for over a month. We're waiting for a release version
@m1ga We should slowly prepare for this to become more relevant. Happy to offer a helping hand once it's clear whats to left to do.