javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: shadow wip

Browse Source
This commit is contained in:
Nathan Walker
2022-03-02 20:06:51 -08:00
parent c1e431a0f7
commit b2fd5561f2
6 changed files with 227 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/app-root.xml
View File

@ -1,2 +1,2 @@
<Frame defaultPage="main-page">
<Frame defaultPage="pages/box-shadow">
</Frame>

16
apps/toolbox/src/app.css
View File

@ -57,8 +57,6 @@ Button {
.box-shadow-demo .box-shadow-prop-controls TextField{
margin-left: 10;
padding: 5;
border-bottom-width: 1;
border-color: #65ADF1;
}
.box-shadow-demo .controls .description {
@ -68,18 +66,22 @@ Button {
margin-bottom: 10;
}
.box-shadow-demo .controls Button[selectedAttr=true] {
.box-shadow-demo .controls .unselected {
background-color: transparent;
color: #65ADF1;
}
.box-shadow-demo .controls .selected {
background-color: #65ADF1;
color: #fff;
}
.box-shadow-prop-controls .btn-apply {
background-color: #65ADF1;
color: #fff;
padding: 10 15;
padding: 5 6;
border-radius: 4;
margin-left: 10;
font-size: 17;
margin-right: 8;
font-size: 11;
font-weight: bold;
}

31
apps/toolbox/src/pages/box-shadow.ts
View File

@ -5,14 +5,17 @@ export function navigatingTo(args: EventData) {
page.bindingContext = new BoxShadowModel();
}
const defaultBoxShadow = '0 4 4 4 rgba(0, 0, 0, 0.5)';
// const defaultBoxShadow = '0 10 15 -3 rgba(200, 0, 0, 0.4)';
// const defaultBoxShadow = '5 5 1 1 rgba(255, 0, 0, .9)';
// const defaultBoxShadow = '5 5 5 10 rgba(255, 0, 0, .9)';
export class BoxShadowModel extends Observable {
private _selectedComponentType: string = 'buttons';
private _selectedBackgroundType: string;
private _selectedBorderType: string;
private _selectedAnimation: string;
private _boxShadow: string = '0 10 15 -3 rgba(200, 0, 0, 0.4)';
// private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
// private _boxShadow: string = '5 5 5 10 rgba(255, 0, 0, .9)';
private _boxShadow: string = defaultBoxShadow;
background: string;
borderWidth: number;
@ -78,7 +81,7 @@ export class BoxShadowModel extends Observable {
this.borderRadius = 10;
break;
case 'partial':
this.borderRadius = '10 0 0 0';
this.borderRadius = '10 10 0 0';
break;
case 'none':
this.borderRadius = 0;
@ -115,6 +118,26 @@ export class BoxShadowModel extends Observable {
this.notifyPropertyChange('appliedBoxShadow', this.appliedBoxShadow);
}
resetAll() {
this._boxShadow = defaultBoxShadow;
this.appliedBoxShadow = null;
this.notifyPropertyChange('appliedBoxShadow', this.appliedBoxShadow);
this.borderRadius = 0;
this.borderWidth = 0;
this.notifyPropertyChange('borderRadius', this.borderRadius);
this.notifyPropertyChange('borderWidth', this.borderWidth);
this.background = null;
this.notifyPropertyChange('background', this.background);
this._selectedBackgroundType = null;
this.notifyPropertyChange('selectedBackgroundType', null);
this._selectedBorderType = null;
this.notifyPropertyChange('selectedBorderType', null);
this._selectedComponentType = null;
this.notifyPropertyChange('selectedComponentType', null);
this._selectedAnimation = null;
}
textChange(args): void {
this._boxShadow = args.object.text;
}

46
apps/toolbox/src/pages/box-shadow.xml
View File

@ -9,7 +9,7 @@
<!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout padding="20">
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="StackLayout" />
</StackLayout>
@ -28,7 +28,6 @@
<FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="FlexboxLayout" />
</FlexboxLayout>
</StackLayout>
</ScrollView>
@ -46,47 +45,46 @@
</GridLayout>
<!-- images -->
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
<!-- images -->
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
</ContentView>
</GridLayout>
<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
</ContentView>
</GridLayout>
</StackLayout>
<GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls">
<GridLayout row="1" rows="auto,auto" columns="auto,*,auto" class="box-shadow-prop-controls">
<Label col="0" verticalAlignment="center" text="box-shadow:" />
<TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
<TextField col="1" colSpan="2" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
</TextField>
<Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
<Button row="1" col="0" text="RESET" fontSize="11" tap="{{ resetAll }}" />
<Button row="1" col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
</GridLayout>
<ScrollView row="2">
<StackLayout padding="10" class="controls">
<Label text="Components" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" />
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" />
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" />
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" />
<Button text="Layouts" componentType="layouts" class="{{ selectedComponentType == 'layouts' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Labels" componentType="labels" class="{{ selectedComponentType == 'labels' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Buttons" componentType="buttons" class="{{ selectedComponentType == 'buttons' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Images" componentType="images" class="{{ selectedComponentType == 'images' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
</FlexboxLayout>
<Label text="Background" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" />
<Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" />
<Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" />
<Button text="Solid" backgroundType="solid" class="{{ selectedBackgroundType == 'solid' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
<Button text="Transparent" backgroundType="transparent" class="{{ selectedBackgroundType == 'transparent' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
<Button text="Gradient" backgroundType="gradient" class="{{ selectedBackgroundType == 'gradient' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
</FlexboxLayout>
<Label text="Borders" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" />
<Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" />
<Button text="Partial" borderType="partial" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" tap="{{ selectBorderType }}" />
<Button text="Solid" borderType="solid" class="{{ selectedBorderType == 'solid' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="Rounded" borderType="rounded" class="{{ selectedBorderType == 'rounded' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="Partial" borderType="partial" class="{{ selectedBorderType == 'partial' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" class="{{ selectedBorderType == 'none' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
</FlexboxLayout>
<Label text="Animations" />