Skip to content

Commit cf4fca4

Browse files
ekspertskristianhasselknippe
eksperts
authored and
kristianhasselknippe
committed
Circular: all-around cleanup in JS and UX (fuse-open#52)
* all-around cleanup in JS and UX * Fill -> Color
1 parent 7fb7925 commit cf4fca4

File tree

1 file changed

+96
-97
lines changed

1 file changed

+96
-97
lines changed

‎Samples/Controls/Circular/MainView.ux

+96-97
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,76 @@
11
<App>
2-
<Panel ux:Class="ClockTick" ux:Name="self">
3-
<string ux:Property="Text"/>
4-
<float ux:Property="ClockValue"/>
5-
<Text Alignment="Center" Value="{ReadProperty self.Text}" FontSize="24" Color="0,0,0,1"/>
2+
<Panel ux:Class="ClockTick">
3+
<string ux:Property="Text" />
4+
<Text Alignment="Center" Value="{ReadProperty Text}" FontSize="24" />
65
</Panel>
76

87
<Panel ux:Class="ClockHand" Anchor="0%,50%" X="50%" Y="50%" Width="29.5%" Height="10%"
9-
TransformOrigin="Anchor" ux:Name="selfTheHourLine" SnapToPixels="false">
8+
TransformOrigin="Anchor" SnapToPixels="false">
109
<Circle Alignment="CenterLeft" Height="20%" Aspect="1" BoxSizing="FillAspect"
11-
Fill="0.2,0.8,1,0.4" Anchor="50%,50%" SnapToPixels="false"/>
10+
Color="#3df6" Anchor="50%,50%" SnapToPixels="false" />
1211
<Circle Alignment="CenterRight" Height="100%" Aspect="1" BoxSizing="FillAspect"
13-
Fill="0.2,0.8,1,0.2" Anchor="50%,50%" SnapToPixels="false"/>
12+
Color="#3df3" Anchor="50%,50%" SnapToPixels="false" />
1413
<Circle Alignment="CenterRight" Height="20%" Aspect="1" BoxSizing="FillAspect"
15-
Fill="0.2,0.8,1,0.4" Anchor="50%,50%" SnapToPixels="false"/>
14+
Color="#3df6" Anchor="50%,50%" SnapToPixels="false" />
1615
<Rectangle Alignment="VerticalCenter" Height="3%" MinHeight="1"
17-
Fill="0.2,0.8,1,0.2" SnapToPixels="false"/>
16+
Color="#3df3" SnapToPixels="false" />
1817
</Panel>
1918

20-
<ClientPanel Background="0.8,0.8,0.8,1">
19+
<ClientPanel Background="#ccc">
2120
<JavaScript>
22-
var Observable = require("FuseJS/Observable")
21+
var Observable = require("FuseJS/Observable");
2322

2423
function formatTime(x) {
25-
var q = x.toFixed(0)
24+
var q = x.toFixed(0);
2625
if (x < 10) {
27-
return "0" + q
26+
q = "0" + q;
2827
}
29-
return q
30-
}
31-
32-
exports.hoursX = Observable(0)
33-
exports.hoursY = Observable(0)
34-
exports.hours = Observable(function() {
35-
return exports.hoursX.value + exports.hoursY.value * 12
36-
})
37-
exports.displayHours = exports.hours.map(function(x) {
38-
return formatTime(x)
39-
})
40-
exports.minutes = Observable(0)
41-
exports.displayMinutes = exports.minutes.map(function(x) {
42-
return formatTime(x)
43-
})
44-
45-
exports.selectHour = function(args) {
46-
exports.hoursX.value = args.value%12
47-
exports.hoursY.value = Math.floor(args.value/12)
48-
}
49-
50-
exports.selectMinute = function(args) {
51-
exports.minutes.value = args.value
52-
}
28+
return q;
29+
};
30+
31+
var hoursX = Observable(0);
32+
var hoursY = Observable(0);
33+
var hours = Observable(function() {
34+
return hoursX.value + hoursY.value * 12;
35+
});
36+
var displayHours = hours.map(function(x) {
37+
return formatTime(x);
38+
});
39+
40+
var minutes = Observable(0);
41+
var displayMinutes = minutes.map(function(x) {
42+
return formatTime(x);
43+
});
44+
45+
module.exports = {
46+
hoursX: hoursX,
47+
hoursY: hoursY,
48+
displayHours: displayHours,
49+
minutes: minutes,
50+
displayMinutes: displayMinutes
51+
};
5352
</JavaScript>
53+
5454
<WhileTrue ux:Name="ShowMinutes">
55-
<Change HourSelect.Opacity="0" Duration="0.3"/>
56-
<Scale Target="HourSelect" Factor="1.5" Duration="0.3"/>
57-
<Change HourSelect.Visibility="Hidden" Delay="0.3"/>
58-
<Change MinuteSelect.Visibility="Visible"/>
59-
<Change HourSelect.IsEnabled="false"/>
55+
<Change HourSelect.Opacity="0" Duration="0.3" />
56+
<Scale Target="HourSelect" Factor="1.5" Duration="0.3" />
57+
<Change HourSelect.Visibility="Hidden" Delay="0.3" />
58+
<Change MinuteSelect.Visibility="Visible" />
59+
<Change HourSelect.IsEnabled="false" />
6060
</WhileTrue>
6161

6262
<Panel Dock="Top" Margin="0,0,0,10">
6363
<StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="10">
64-
<Text ux:Class="ClockText" FontSize="24" Color="0,0.5,0.8,1"/>
64+
<Text ux:Class="ClockText" FontSize="24" Color="#08d" />
6565
<ClockText Value="{displayHours}" HitTestMode="LocalBounds">
6666
<Tapped>
67-
<Set ShowMinutes.Value="false"/>
67+
<Set ShowMinutes.Value="false" />
6868
</Tapped>
6969
</ClockText>
70-
<ClockText Value=":"/>
70+
<ClockText Value=":" />
7171
<ClockText Value="{displayMinutes}" HitTestMode="LocalBounds">
7272
<Tapped>
73-
<Set ShowMinutes.Value="true"/>
73+
<Set ShowMinutes.Value="true" />
7474
</Tapped>
7575
</ClockText>
7676
</StackPanel>
@@ -84,84 +84,83 @@
8484

8585
<CircularRangeBehavior ux:Name="HourSlide"
8686
StartAngleDegrees="-90" EndAngleDegrees="270"
87-
MinimumRadius="0.59" MaximumRadius="0.83" IsWrapping="true"/>
87+
MinimumRadius="0.59" MaximumRadius="0.83" IsWrapping="true" />
8888

8989
<ClockHand ux:Name="TheHourLine">
90-
<Rotation ux:Name="HourRotate"/>
90+
<Rotation ux:Name="HourRotate" />
9191
<Attractor Target="HourRotate.Degrees" Value="{ReadProperty HourSlide.DegreesValue}"
92-
Type="SmoothSnap" Unit="Degrees"/>
93-
92+
Type="SmoothSnap" Unit="Degrees" />
9493
<Attractor Target="TheHourLine.Width" ux:Name="HourLineAttractor"
95-
Type="SmoothSnap" Unit="Points"/>
94+
Type="SmoothSnap" Unit="Points" />
9695
<RangeAnimation Value="{ReadProperty HourSelect.ValueY}" Minimum="0" Maximum="1">
97-
<Change HourLineAttractor.Value="41.5"/>
96+
<Change HourLineAttractor.Value="41.5" />
9897
</RangeAnimation>
9998
</ClockHand>
10099

101100
<InteractionCompleted>
102-
<Set ShowMinutes.Value="true"/>
101+
<Set ShowMinutes.Value="true" />
103102
</InteractionCompleted>
104103

105-
<Circle Layer="Background" Fill="1,1,1,1"/>
104+
<Circle Layer="Background" Color="#fff" />
106105
<Panel>
107-
<CircleLayout Radius="0.75" StartAngleDegrees="-90" EndAngleDegrees="270"/>
108-
<ClockTick Text="00" ClockValue="0"/>
109-
<ClockTick Text="01" ClockValue="1"/>
110-
<ClockTick Text="02" ClockValue="2"/>
111-
<ClockTick Text="03" ClockValue="3"/>
112-
<ClockTick Text="04" ClockValue="4"/>
113-
<ClockTick Text="05" ClockValue="5"/>
114-
<ClockTick Text="06" ClockValue="6"/>
115-
<ClockTick Text="07" ClockValue="7"/>
116-
<ClockTick Text="08" ClockValue="8"/>
117-
<ClockTick Text="09" ClockValue="9"/>
118-
<ClockTick Text="10" ClockValue="10"/>
119-
<ClockTick Text="11" ClockValue="11"/>
106+
<CircleLayout Radius="0.75" StartAngleDegrees="-90" EndAngleDegrees="270" />
107+
<ClockTick Text="00" />
108+
<ClockTick Text="01" />
109+
<ClockTick Text="02" />
110+
<ClockTick Text="03" />
111+
<ClockTick Text="04" />
112+
<ClockTick Text="05" />
113+
<ClockTick Text="06" />
114+
<ClockTick Text="07" />
115+
<ClockTick Text="08" />
116+
<ClockTick Text="09" />
117+
<ClockTick Text="10" />
118+
<ClockTick Text="11" />
120119
</Panel>
121120
<Panel>
122-
<CircleLayout ItemSpacingDegrees="5" StartAngleDegrees="-90" EndAngleDegrees="270"/>
123-
<ClockTick Text="12" ClockValue="12"/>
124-
<ClockTick Text="13" ClockValue="13"/>
125-
<ClockTick Text="14" ClockValue="14"/>
126-
<ClockTick Text="15" ClockValue="15"/>
127-
<ClockTick Text="16" ClockValue="16"/>
128-
<ClockTick Text="17" ClockValue="17"/>
129-
<ClockTick Text="18" ClockValue="18"/>
130-
<ClockTick Text="19" ClockValue="19"/>
131-
<ClockTick Text="20" ClockValue="20"/>
132-
<ClockTick Text="21" ClockValue="21"/>
133-
<ClockTick Text="22" ClockValue="22"/>
134-
<ClockTick Text="23" ClockValue="23"/>
121+
<CircleLayout ItemSpacingDegrees="5" StartAngleDegrees="-90" EndAngleDegrees="270" />
122+
<ClockTick Text="12" />
123+
<ClockTick Text="13" />
124+
<ClockTick Text="14" />
125+
<ClockTick Text="15" />
126+
<ClockTick Text="16" />
127+
<ClockTick Text="17" />
128+
<ClockTick Text="18" />
129+
<ClockTick Text="19" />
130+
<ClockTick Text="20" />
131+
<ClockTick Text="21" />
132+
<ClockTick Text="22" />
133+
<ClockTick Text="23" />
135134
</Panel>
136135
</RangeControl2D>
137136

138137
<RangeControl Value="{minutes}" Minimum="0" Maximum="60" UserStep="5"
139138
ux:Name="MinuteSelect" Visibility="Hidden">
140139

141140
<CircularRangeBehavior ux:Name="MinuteSlide"
142-
StartAngleDegrees="-90" EndAngleDegrees="270" IsWrapping="true"/>
141+
StartAngleDegrees="-90" EndAngleDegrees="270" IsWrapping="true" />
143142

144143
<ClockHand Width="41.5%">
145-
<Rotation ux:Name="MinuteRotate"/>
144+
<Rotation ux:Name="MinuteRotate" />
146145
<Attractor Target="MinuteRotate.Degrees" Value="{ReadProperty MinuteSlide.DegreesValue}"
147-
Type="SmoothSnap" Unit="Degrees"/>
146+
Type="SmoothSnap" Unit="Degrees" />
148147
</ClockHand>
149148

150-
<Circle Layer="Background" Fill="1,1,1,1"/>
149+
<Circle Layer="Background" Color="#fff" />
151150
<Panel>
152-
<CircleLayout ItemSpacingDegrees="5" StartAngleDegrees="-90" EndAngleDegrees="270"/>
153-
<ClockTick Text="00" ClockValue="00"/>
154-
<ClockTick Text="05" ClockValue="05"/>
155-
<ClockTick Text="10" ClockValue="10"/>
156-
<ClockTick Text="15" ClockValue="15"/>
157-
<ClockTick Text="20" ClockValue="20"/>
158-
<ClockTick Text="25" ClockValue="25"/>
159-
<ClockTick Text="30" ClockValue="30"/>
160-
<ClockTick Text="35" ClockValue="35"/>
161-
<ClockTick Text="40" ClockValue="40"/>
162-
<ClockTick Text="45" ClockValue="45"/>
163-
<ClockTick Text="50" ClockValue="50"/>
164-
<ClockTick Text="55" ClockValue="55"/>
151+
<CircleLayout ItemSpacingDegrees="5" StartAngleDegrees="-90" EndAngleDegrees="270" />
152+
<ClockTick Text="00" />
153+
<ClockTick Text="05" />
154+
<ClockTick Text="10" />
155+
<ClockTick Text="15" />
156+
<ClockTick Text="20" />
157+
<ClockTick Text="25" />
158+
<ClockTick Text="30" />
159+
<ClockTick Text="35" />
160+
<ClockTick Text="40" />
161+
<ClockTick Text="45" />
162+
<ClockTick Text="50" />
163+
<ClockTick Text="55" />
165164
</Panel>
166165
</RangeControl>
167166

0 commit comments

Comments
 (0)