Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extend documentation to document any relevant classes. #5

Merged
merged 2 commits into from Mar 13, 2019
Merged

Extend documentation to document any relevant classes. #5

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab1bb73
Extend documentation to document any relevant classes.
Shugabuga Mar 13, 2019
71324dd
White-list notification.
Shugabuga Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
119 changes: 104 additions & 15 deletions _docs/native-depictions.md
View file
Open in desktop
Expand Up @@ -30,24 +30,35 @@ SileoDepiction: https://repo.dynastic.co/sileo-depiction/68292503631036416/

Sileo depictions are composed of tabs, which contain an array of views. Views can be formed from any of the classes listed in the below section.

Each of the below objects *must* have a class.

### Root object

<!-- TODO: Get AB to style tables properly. -->

Class: `DepictionTabView`

| Key | Type | Description |
|---------------|---------------------------------------|-----------------------------------------------------------------------------------------|
| `minVersion` | String | Minimum app version required for Sileo to display the depiction. Should be 0.1 for now. |
| `headerImage` | String (URL) | A URL to the image that should be displayed in the header of the package page. |
|---------------|---------------------------------------|-----------------------------------------------------------------------------------------
| `minVersion` | String | Minimum app version required for Sileo to display the depiction. Should be 0.1 for now.
| `headerImage` | String (URL) | A URL to the image that should be displayed in the header of the package page.
| `tintColor` | String (Color) | A CSS-compatible color code. Most views also support this property.
| `tabs` | [Array of Tab objects](#tab-object) | An array of tabs that the depiction should display. |

<br>

### Tab object

| Key | Type | Description |
|-----------|---------------------------------------|--------------------------------|
| `tabname` | String | The name of the tab. |
| `views` | [Array of View objects](#view-object) | The views (layout) of the tab. |
Class: `DepictionStackView`

Tabs are separate screens that are made up of views. They can be used to separate between more important data (such as a package's name) and other supplemental information (such as a changelog).

| Key | Type | Description | Required?
|-----------|---------------------------------------|--------------------------------|------------|
| `tabname` | String | The name of the tab. | Yes
| `views` | [Array of View objects](#view-object) | The views (layout) of the tab. | Yes
| `orientation` | String (`landscape`/`portrait`) | Whether the view is portrait or landscape. | No
| `xPadding` | Double | Change the horizontal padding. | No

<br>

Expand All @@ -67,8 +78,9 @@ Creates a large title intended for separating major sections of a given tab.
|-----------|---------------------------------------|--------------------------------|----------------|
| `title` | String | The title of the header. | Yes
| `useMargins` | Boolean | Allow margins above/below the header. | No
| `useBottomMargin` | Boolean | Adds a margin below the header (does nothing if useMargins = false). | No
| `useBottomMargin` | Boolean | Adds a margin below the header (if margins are enabled). | No
| `useBoldText` | Boolean | Make the text bold. | No
| `alignment` | AlignEnum | Change the alignment to the left (`0`), center (`1`), or the right (`2`). | No

#### Subheaders

Expand All @@ -80,7 +92,7 @@ Subheaders are smaller headers.
|-----------|---------------------------------------|--------------------------------|----------------|
| `title` | String | The title of the header. | Yes
| `useMargins` | Boolean | Allow margins above/below the header. | No
| `useBottomMargin` | Boolean | Adds a margin below the header (does nothing if useMargins = false). | No
| `useBottomMargin` | Boolean | Adds a margin below the header (if margins are enabled). | No
| `useBoldText` | Boolean | Make the text bold. | No

#### Markdown Text
Expand All @@ -91,11 +103,44 @@ Allows for basic Markdown or HTML to be displayed, ideal for large blocks of tex

| Key | Type | Description | Required?
|-----------|---------------------------------------|--------------------------------|----------------|
| `markdown` | String | The text to be rendered as Markdown (or HTML) | Yes
| `markdown` | String (Markdown) | The text to be rendered as Markdown (or HTML) | Yes
| `useSpacing` | Boolean | Enable or disable the use of vertical spacing. | No
| `useMargins` | Boolean | Enable or disable the use of horizontal margins. | No
| `useRawFormat` | Boolean | If true, `markdown` will accept basic HTML instead of Markdown. | No

#### Videos

Class: `DepictionVideoView`

Renders a video.

| Key | Type | Description | Required?
|-----------|---------------------------------------|--------------------------------|----------------|
| `URL` | String (URL) | The URL to the video to show. | Yes
| `width` | Double | The width of the image. | Yes
| `height` | Double | The height of the image. | Yes
| `cornerRadius` | Double | The roundness of the view's corners. | Yes
| `alignment` | AlignEnum | Change the alignment to the left (`0`), center (`1`), or the right (`2`). | No
| `autoplay` | Boolean (whitelisted) | Enables auto-play for the video. | No
| `showPlaybackControls` | Boolean (whitelisted) | Hides the controls if auto-play is enabled. | No

*Note: Only whitelisted repositories can use auto-play functionality. Please contact the Sileo team for inquiries.*

#### Images

Class: `DepictionImageView`

Renders an image.

| Key | Type | Description | Required?
|-----------|---------------------------------------|--------------------------------|----------------|
| `URL` | String (URL) | The URL to the image to show. | Yes
| `width` | Double | The width of the image. | Yes
| `height` | Double | The height of the image. | Yes
| `cornerRadius` | Double | The roundness of the view's corners. | Yes
| `alignment` | AlignEnum | Change the alignment to the left (`0`), center (`1`), or the right (`2`). | No
| `horizontalPadding` | Double | Padding to put above and below the button. | No

#### Screenshots

Class: `DepictionScreenshotsView`
Expand All @@ -105,8 +150,11 @@ Displays a screenshot carousel with provided images.
| Key | Type | Description | Required?
|-----------|---------------------------------------|--------------------------------|----------------|
| `screenshots` | [Array of Screenshot objects](#screenshot-object) | The screenshots to be used. | Yes
| `itemCornerRadius` | Double | Change the roundness of the view's corners. | No
| `itemSize` | Dimensions (`{x,y}`) | Change the size of the view. | No
| `itemCornerRadius` | Double | The roundness of the view's corners. | Yes
| `itemSize` | Dimensions (`{x,y}`) | Change the size of the view. | Yes
| `iphone ` | `DepictionScreenshotsView` | Override class with this property if on an iPhone. | No
| `ipad ` | `DepictionScreenshotsView` | Override class with this property if on an iPad. | No


##### Screenshot Object

Expand All @@ -133,15 +181,29 @@ Adds a table cell with a given value that is ideal for displaying the current ve

Class: `DepictionTableButtonView`

Adds a table cell that opens a given URL when tapped.
Adds a table cell that opens a given URL or performs another action when tapped.

| Key | Type | Description | Required?
|-----------|---------------------------------------|-------------------|----------------|
| `title` | String | The button's label. | Yes
| `action` | String (URL) | The URL to open when the button is pressed. | Yes
| `backupAction` | String (URL) | An alternate action to try if the action is not supported. | No
| `openExternal` | Double | Set whether to open the URL in an external app. | No
| `yPadding` | Double | Padding to put above and below the button. | No

#### Button

Class: `DepictionButtonView`

Adds a button that opens a given URL or performs another action when tapped.

| Key | Type | Description | Required?
|-----------|---------------------------------------|-------------------|----------------|
| `text` | String | The button's label. | Yes
| `action` | String (URL) | The URL to open when the button is pressed. | Yes
| `backupAction` | String (URL) | An alternate action to try if the action is not supported. | No
| `openExternal` | Double | Set whether to open the URL in an external app. | No
| `yPadding` | Double | Padding to put above and below the button. | No

#### Separator

Expand All @@ -165,6 +227,33 @@ Class: `DepictionAdmobView`

Adds an [AdMob](https://admob.google.com/home/) banner to the depiction if you wish to display an advertisement.

| Key | Type | Description | Required?
| Key | Type | Description | Required?
|-----------|---------------------------------------|-------------------|----------------|
| `adUnitID` | String | Your Ad Unit ID provided by Google. | Yes
| `adUnitID`| String | Your Ad Unit ID provided by Google. | Yes
| `adSize` | String (`Banner`/`LargeBanner`/`SmartBanner`) | The size of the ad to be displayed. | No

#### Ratings

Class: `DepictionRatingView`

Graphically displays a rating on a five-star scale.

| Key | Type | Description | Required?
|-------------|---------------------|--------------------------------------|----------------|
| `rating` | Double (0-5) | How many stars should be shaded in. | No
| `alignment` | AlignEnum | Change the alignment to the left (`0`), center (`1`), or the right (`2`). | No


#### Reviews

Class: `DepictionReviewView`

Displays a full review entry, including author, the rating they left, and a Markdown-compatible reply.

| Key | Type | Description | Required?
|-------------|---------------------|--------------------------------------|----------------|
| `title` | String | The title of the review. | Yes
| `author` | String | The person who wrote the review. | Yes
| `markdown` | String (Markdown) | The body of the review. | Yes
| `rating` | Double (0-5) | How many stars should be shaded in. | No