Skip to content

Commit 7a78a08

Browse files
mortoraykristianhasselknippe
mortoray
authored and
kristianhasselknippe
committed
Adding several description.yaml files (fuse-open#48)
* Adding several description.yaml files * added description.yaml to Lifecycle * added description.yaml to Gestures/Swipe * added description.yaml to Camera * added description.yaml to Controls/ButtonWithImage * added description.yaml for DropdownMenu * added description.yaml for EdgeNavigator * added description.yaml to FileBrowser * add description.yaml to FilterOnObservableCondition * added description.yaml to GeoLocation * Added description.yaml to /RelativeTo * fix typos * patch names, simplify text
1 parent 74b9589 commit 7a78a08

File tree

24 files changed

+297
-20
lines changed

24 files changed

+297
-20
lines changed

‎Samples/Animation/CyclePhase/description.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: Animation using repeating Cycle
2+
desc: A continous animation of dots appearing from the left and moving to the right.
3+
api:
4+
-
5+
class: Fuse.Animations.Cycle
6+
desc: Configures a variety of properties to create a structured visual animation.

‎Samples/Camera/description.yaml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: Taking pictures from JavaScript
2+
desc: This example uses the FuseJS Camera, ImageTools and CameraRoll APIs to acquire and manipulate images from JavaScript.
3+
api:
4+
-
5+
class: Fuse.Reactive.WhileEmpty
6+
desc: Is used to show an image while the user has yet to take a picture.
7+
-
8+
class: Fuse.Reactive.WhileNotEmpty
9+
desc: Is used to display a picture after the user has taken it with the camera.
10+
-
11+
class: Fuse.Camera.Camera
12+
desc: The Camera module is used from JavaScript to take a picture using the default platform camera app.

‎Samples/Controls/ButtonWithImage/description.yaml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: Creating a custom button with an image
2+
desc: This example shows two different ways to create a custom button that has an image and text as properties. Which approach you use depends on what is most convenient in your application.
3+
api:
4+
-
5+
class: Fuse.Resources.FileImageSource
6+
desc: Supplies an Image as a resource to a custom button class.
7+
-
8+
class: Fuse.Resources.ImageSource
9+
desc: Declares a ux:Property for a custom button that accepts an image source.
10+
-
11+
class: Uno.UX.FileSource
12+
desc: Declares a ux:property for a custom button that accepts an image file path.

‎Samples/Controls/Circular/description.yaml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Circular layout and range control
2+
desc: This example creates a time picker for hours and minutes with a circular layout.
3+
api:
4+
-
5+
class: Fuse.Layouts.CircleLayout
6+
desc: Arranges hour and minute values around a clock face.
7+
-
8+
class: Fuse.Controls.RangeControl2d
9+
desc: Creates a two-ring selection for hour selection on a clock face.
10+
-
11+
class: Fuse.Gestures.CircularRangeBehavior
12+
desc: Creates a selection for hours and minutes on a clock face.
13+
-
14+
class: Fuse.Triggers.InteractionCompleted
15+
desc: Progresses to minute selection after the user has selected an hour.
16+
-
17+
class: Fuse.Triggers.RangeAnimation
18+
desc: Animates the change between selecting from two levels in a two-ring hour selection.

‎Samples/Controls/Scrollbar/description.yaml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
name: Scrollbar
2+
desc: Shows a scrolling indicator for a `ScrollView` that is only visible while the user is actively scrolling.
3+
api:
4+
-
5+
class: Fuse.Triggers.ScrollingAnimation
6+
desc: Moves a thumb indicator relative to the scroll position.
7+
-
8+
class: Fuse.Triggers.WhileInteracting
9+
desc: Displays a scroll bar only while the user is scrolling.

‎Samples/Controls/Selection/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Selection API Examples
1+
# Pizza Selection Examples
22

33
This example demonstrates the various aspects of the selection API by means of a pseudo-pizza delivery app.
44

@@ -21,7 +21,7 @@ The button to go to the next page doesn't appear until an item is selected. This
2121
<WhileString Value="{ReadProperty pizzaSel.Value}" Test="IsNotEmpty">
2222

2323

24-
## Multiple Selection
24+
## Multiple Selection
2525

2626
![Multiple selection](https://github.com/fusetools/fuse-samples/blob/master/Samples/Controls/Selection/gifs/multiple.gif)
2727

‎Samples/Controls/Selection/description.yaml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Pizza Selection
2+
desc: This example demonstrates the various aspects of the selection API by means of a pseudo-pizza delivery app.
3+
api:
4+
-
5+
class: Fuse.Selection.Selection
6+
desc: Creates a multiple select, radio buttons, and a drop-down.
7+
-
8+
class: Fuse.Selection.Selectable
9+
desc: Used UX and JavaScript specified options for selections.
10+
-
11+
class: Fuse.Selection.Selected
12+
desc: Animates an option when it is selected.
13+
-
14+
class: Fuse.Selection.Deselected
15+
desc: Animates an option when it is deselected.
16+
-
17+
class: Fuse.Selection.ToggleSelection
18+
desc: Modifies the selection of an item when the user taps it.
19+
-
20+
class: Fuse.Selection.WhileSelected
21+
desc: Changes the appearance of an item while it is selected.
22+
-
23+
class: Fuse.Layouts.ColumnLayout
24+
desc: Adapts the layout of selection options based on screen size.
25+

‎Samples/DropdownMenu/description.yaml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: A custom dropdown menu
2+
desc: This example creates custom dropdown menu.
3+
api:
4+
-
5+
class: Fuse.Triggers.WhileTrue
6+
desc: Is used to toggle the expanded state of the dropdown menu.
7+
-
8+
class: Fuse.Triggers.Actions.Toggle
9+
desc: Is used to toggle the WhileTrue trigger containing the expanded state of the dropdown menu.
10+
-
11+
class: Fuse.Reactive.DataBinding
12+
desc: Used to create an explicit data-binding from the Selected state of the dropdown menu.

‎Samples/EdgeNavigator/description.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: EdgeNavigator example
2+
desc: A minimal example showing off the EdgeNavigator control.
3+
api:
4+
-
5+
class: Fuse.Controls.EdgeNavigator
6+
desc: Displays an edge menu when swiping from the left edge.

‎Samples/FileBrowser/description.yaml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: A file browser
2+
desc: This example uses the FileSystem JavaScript API to browser the local file system using the Router and Navigator.
3+
api:
4+
-
5+
class: Fuse.FileSystem.FileSystemModule
6+
desc: Is used to query the file system for information.
7+
-
8+
class: Fuse.Controls.Navigator
9+
desc: Is used to navigate between the various folders of the file system.
10+
-
11+
class: Fuse.Navigation.Router
12+
desc: Is used to manage the navigation history through the file system.
13+
-
14+
class: Fuse.Navigation.EnteringAnimation
15+
desc: Animates the opacity of the directory page background as it enters.
16+
-
17+
class: Fuse.Navigation.ExitingAnimation
18+
desc: Animates the opacity of the directory page background as it exits.

‎Samples/FilterOnObservableCondition/description.yaml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: Filter on Observable condition
2+
desc: This example shows how one can filter a list based on a condition which itself is an Observable event.
3+
api:
4+
-
5+
class: Fuse.Triggers.AddingAnimation
6+
desc: Animated a list item as it is added to the list.
7+
-
8+
class: Fuse.Triggers.RemovingAnimation
9+
desc: Animated a list item as it is removed from the list.
10+
-
11+
class: Fuse.Triggers.LayoutAnimation
12+
desc: Animates the remaining part of the list when an item is removed.

‎Samples/GameOfLife/description.yaml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
name: Conway's Game of Life
2+
desc: This project uses an array of JavaScript Observables to produce a grid in the interface.
3+
api:
4+
-
5+
class: Fuse.Controls.Grid
6+
desc: A grid bound to a JavaScript data set.
7+

‎Samples/GeoLocation/description.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: GPS Basics Fuse Example
2+
desc: This is a really basic app showing 3 different ways to use FuseJS GeoLocation API to get the location of our device.
3+
api:
4+
-
5+
class: Fuse.GeoLocation.GeoLocation
6+
desc: Used to get the users current position.

‎Samples/Gestures/Swipe/description.yaml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: List items with swipe gestures
2+
desc: This example displays a list of items that each lets the user swipe left or right to reveal actions that can be performed on the item.
3+
api:
4+
-
5+
class: Fuse.Gestures.SwipeGesture
6+
desc: Lets the user swipe in a direction to reveal hidden buttons.
7+
-
8+
class: Fuse.Gestures.WhileSwipeActive
9+
desc: Shows an image overlay while the state of the SwipeGesture is set to active.
10+
-
11+
class: Fuse.Gestures.SwipingAnimation
12+
desc: Moves the list item while swiping so that the hidden buttons are revealed.
13+
-
14+
class: Fuse.Gestures.Swiped
15+
desc: Changes the fill color when the swipe gesture has been activated.
16+
-
17+
class: Fuse.Gestures.ToggleSwipeActive
18+
desc: Toggles the active state of the swipe back to false when a button is clicked.

‎Samples/ImageViewer/MainView.ux

+8-18
Original file line numberDiff line numberDiff line change
@@ -52,33 +52,23 @@
5252
</WhileTrue>
5353

5454
<ZoomGesture Target="TheTransform" Minimum="1" Maximum="3" ux:Name="TheZoom"/>
55-
<Attractor Target="TheTransform.ZoomFactor" ux:Name="TheZoomer" TimeMultiplier="2"/>
56-
<!--
57-
What has happend to SimulationType?
58-
<Attractor Target="TheTransform.ZoomFactor" ux:Name="TheZoomer"
59-
SimulationType="ElasticForceNormalized" TimeMultiplier="2"/>-->
55+
<Attractor Target="TheTransform.ZoomFactor" ux:Name="TheZoomer" TimeMultiplier="2"
56+
Type="Elastic" Unit="Normalized"/>
6057

6158
<RotateGesture Target="TheTransform" ux:Name="TheRotate" StepDegrees="30"/>
62-
<Attractor Target="TheTransform.Rotation" ux:Name="TheRotater" TimeMultiplier="0.5"/>
63-
<!--
64-
What has happend to SimulationType?
65-
<Attractor Target="TheTransform.Rotation" ux:Name="TheRotater"
66-
SimulationType="ElasticForceAngular" TimeMultiplier="0.5"/>-->
59+
<Attractor Target="TheTransform.Rotation" ux:Name="TheRotater" TimeMultiplier="0.5"
60+
Type="Elastic" Unit="Radians"/>
6761

6862
<PanGesture Target="TheTransform" Constraint="TheViewerImage" ux:Name="ThePan"/>
69-
<Attractor Target="TheTransform.Translation" ux:Name="ThePanner" />
70-
<!--
71-
What has happend to SimulationType?
72-
<Attractor Target="TheTransform.Translation" ux:Name="ThePanner"
73-
SimulationType="ElasticForcePoints"/>-->
63+
<Attractor Target="TheTransform.Translation" ux:Name="ThePanner"
64+
Type="Elastic" Unit="Points"/>
7465

7566
<!-- the user might start interacting while the attractors are still running, stop that -->
7667
<WhileInteracting>
77-
<!-- TODO: https://github.com/fusetools/fuselibs/issues/1344 -->
7868
<!-- Fix will be released soon -->
79-
<!--<Change Target="TheZoomer.IsEnabled" Value="false"/>
69+
<Change Target="TheZoomer.IsEnabled" Value="false"/>
8070
<Change Target="TheRotater.IsEnabled" Value="false"/>
81-
<Change Target="ThePanner.IsEnabled" Value="false"/>-->
71+
<Change Target="ThePanner.IsEnabled" Value="false"/>
8272
</WhileInteracting>
8373

8474
<!-- A wrapping panel to ensure the InteractiveTransform and layout transforms don't

‎Samples/ImageViewer/description.yaml

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Pan, Zoom, and Rotate gestures
2+
desc: This demo creates a simple image viewer that uses `ZoomGesture`, `RotateGesture` and `PanGesture`.
3+
last-reviewed: 2017-02-20
4+
api:
5+
-
6+
class: Fuse.Elements.InteractiveTransform
7+
desc: Coordinates the transform values for several gestures on an image viewer.
8+
-
9+
class: Fuse.Animations.Attractor
10+
desc: Provides smooth animation as the user manipulates the image.
11+
-
12+
class: Fuse.Triggers.Actions.CancelInteractions
13+
desc: Dismisses user gestures when the image view is closed.
14+
-
15+
class: Fuse.Triggers.Timeline
16+
desc: Used to create a gallery to full-screen animation of an image.
17+
-
18+
class: Fuse.Triggers.Actions.PulseBackward
19+
desc: Used to transition between a dynamic source and fixed target state.
20+
-
21+
class: Fuse.Triggers.WhileWindowPortrait
22+
desc: Adjusts the gallery layout based on device orientation.
23+
-
24+
class: Fuse.Gestures.ZoomGesture
25+
desc: Zooms an image in an image viewer. Provides a shrink to dismiss feature.
26+
-
27+
class: Fuse.Gestures.PanGesture
28+
desc: Pans an image, constrained to it's visual extents, in an image viewer.
29+
-
30+
class: Fuse.Gestures.RotateGesture
31+
desc: Rotates an image, in fixed increments, in an image viewer.
32+

‎Samples/Lifecycle/description.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: Lifecycle
2+
desc: This example uses the lifecycle API to change the background color when the app exits the interactive state.
3+
api:
4+
-
5+
class: FuseJS.Lifecycle
6+
desc: Uses the lifecycle API to change the apps background color.

‎Samples/RelativeTo/description.yaml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: Using the RelativeTo and RelativeNode properties
2+
desc: This sample shows the use of the RelativeTo property for the Move animator.
3+
api:
4+
-
5+
class: Fuse.Animations.Move
6+
desc: Used in various places to illustrate the use of the RelativeTo property.
7+
-
8+
class: Fuse.Gestures.WhilePressed
9+
desc: Used to trigger a set of Move animators.
10+
-
11+
class: Fuse.Triggers.LayoutAnimation
12+
desc: Used to move a rectangle in response to it changing position.
13+
-
14+
class: Fuse.Triggers.WhileKeyboardVisible
15+
desc: Used to move the content upwards while the keyboard is visible on screen.

‎Samples/UIStructure/ContextMenu/description.yaml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
name: Context sensitive status indicators
2+
desc: This examples shows how to add context-sensitive elements to a title bar and status bar.
3+
api:
4+
-
5+
class: Fuse.AlternateRoot
6+
desc: Used to place page indicators in a global status bar.
7+
-
8+
class: Fuse.Navigation.WhileActive
9+
desc: Modifies the state of a status bar while a page is active.
10+

‎Samples/UIStructure/Modal/description.yaml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
name: Modal confirmation screen
2+
desc: This example shows how to create a modal confirmation screen.
3+
api:
4+
-
5+
class: Fuse.AlternateRoot
6+
desc: Places a panel far up in the UI tree to make it the top-most one.
7+
-
8+
class: Fuse.Resources.ResourceObject
9+
desc: Assigns a node to a resource for use later in an `AlternateRoot`.
10+

‎Samples/UIStructure/Navigation/description.yaml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Navigator Demo App
2+
desc: This example demonstrates how to combine several pages and components into a single application. It simulates a login/logout process.
3+
api:
4+
-
5+
class: Fuse.Controls.Navigator
6+
desc: Used to structure the navigation between several top-level pages.
7+
-
8+
class: Fuse.Controls.PageControl
9+
desc: Used for section navigation between several related pages.
10+
-
11+
class: Fuse.Navigation.Router
12+
desc: Coordinates a multi-level navigation with a `Navigator` and `PageControl`
13+
-
14+
class: Fuse.Navigation.WhileCanGoBack
15+
desc: Toggles between a back button and menu icon in the title bar.
16+
-
17+
class: Fuse.Controls.EdgeNavigator
18+
desc: Provides a left menu to access various app pages.

‎Samples/UIStructure/PageTabs/description.yaml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
name: Simple navigation tab bar
2+
desc: This example shows how to create a navigation tab bar.
3+
api:
4+
-
5+
class: Fuse.Controls.PageIndicator
6+
desc: Creates a tab for each Page, with a page specific color, and allows navigation to it.
7+
-
8+
class: Fuse.Navigation.PageResourceBinding
9+
desc: Binds to page specific resources in the tab bar.

‎Samples/UIStructure/Transition/description.yaml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
name: Transition Example
2+
desc: This example shows a variety of page transitions during navigation.
3+
api:
4+
-
5+
class: Fuse.Triggers.Transition
6+
desc: Performs a variety of page-to-page transitions, varying the animation based on page name, state and transition type.
7+
-
8+
class: Fuse.Elements.Viewport
9+
desc: Uses a 3d rotation for a page transition effect.
10+
-
11+
class: Fuse.Controls.Navigator
12+
desc: Has several pages with varying animations during transition.
13+

‎Samples/UserEvents/description.yaml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
name: A component with custom events
2+
desc: This example creates a number pad entry component showing how to define and raise user events.
3+
api:
4+
-
5+
class: Fuse.UserEvent
6+
desc: Creates custom events to for a reusable number pad component.
7+
-
8+
class: Fuse.Triggers.OnUserEvent
9+
desc: Responds to custom events from a reusable number pad component.
10+
-
11+
class: Fuse.Reactive.Match
12+
desc: Provides different visuals for an array of number page buttons.
13+

0 commit comments

Comments
 (0)