step1 to step3

src/SUMMARY.md

@@ -69,4 +69,15 @@
   - [Inherits](./examples/inherits/index.md)
     - [All Inherits](./examples/inherits/all.md)
     - [Partial Inherits](./examples/inherits/partial.md)
+  - [Outlook Phone Example](./examples/outlook/index.md)
+    - [Prepare](./examples/outlook/prepare.md)
+    - [Step1: Manage Icons](./examples/outlook/step/1.md)
+    - [Step2: Signin](./examples/outlook/step/2.md)
+    - [Step3: MainView](./examples/outlook/step/3.md)
+      - [Step3-1: Header](./examples/outlook/step/header.md)
+      - [Step3-2: Tabbar](./examples/outlook/step/tabbar.md)
+      - [Step3-3: Content Header](./examples/outlook/step/content_header.md)
+      - [Step3-4: Content](./examples/outlook/step/content.md)
+      - [Step3-5: Bottom Btn](./examples/outlook/step/bottom_btn.md)
+    - [Step4: App](./examples/outlook/step/4.md)
 - [Updates](./updates.md)

src/examples/outlook/index.md

@@ -0,0 +1 @@
+# Outlook Phone Example

src/examples/outlook/prepare.md

@@ -0,0 +1,56 @@
+# Prepare
+
+## icons, pictures
+
+- iconfont: [iconfont](https://www.iconfont.cn/)
+- iconpark: [iconpark](https://iconpark.oceanengine.com/official)
+
+## phone size
+
+- [uiiuii](https://uiiiuiii.com/screen/)
+
+iPhone 13 Pro size: 844px * 390px
+
+find `ui/global.slint` and change window height| window width
+
+```js
+export global ROOT_GLOBAL {
+  in-out property <length> window-height : 844px;
+  in-out property <length> window-width : 390px;
+}
+```
+
+## theme color
+
+blue: `#0070cd`, `rgb(0, 112, 205)`
+
+## renovate project
+
+### Cargo.toml
+- name
+- authors
+- description
+- dependencies and build-dependencies
+
+```toml
+[package]
+name = "outlook_example"
+version = "0.1.0"
+edition = "2021"
+authors = ["syf20020816@outlook.com"]
+build = "build.rs"
+description = "an example for Outlook phone use (SurrealismUI + Slint)"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+slint = "1.6.0"
+
+[build-dependencies]
+slint-build = "1.6.0"
+```
+
+### assets
+
+- remove redunct svg|png|... (surrealism.png|surrealism.svg)
+- add needed icons

src/examples/outlook/step/1.md

@@ -0,0 +1,108 @@
+# Step1 Manage Icons
+
+## ui/core/static/index.slint
+
+set icon type and icon collection
+
+set tabbar icon, header icon and popover icon struct to import icons
+
+finally, use `IIcons` struct to export in `ROOT_GLOBAL`, then we can use in slint components
+
+```rust
+export struct TabbarIconType {
+    clicked: image,
+    unclicked: image
+}
+
+export struct TabbarIcon {
+    email: TabbarIconType,
+    calendar: TabbarIconType,
+    source: TabbarIconType,
+    more: TabbarIconType,
+    file: TabbarIconType,
+    connection: TabbarIconType,
+}
+export struct HeaderIcon {
+    remind: image,
+    search: image,
+}
+
+export struct PopoverIcon {
+   email: image,
+   unread: image,
+   flag: image,
+   pin: image,
+   person: image,
+   link: image,
+   at: image,
+}
+
+export struct IIcons {
+    tabbar: TabbarIcon,
+    header: HeaderIcon,
+    logo: image,
+    popover: PopoverIcon,
+}
+```
+
+## ui/core/index.slint
+
+```js
+export * from "./static/index.slint";
+```
+
+## ui/global.slint
+
+In `ROOT_GLOBAL`, use `@image-url()` to import needed icons
+
+```rust
+import { IIcons } from "./core/index.slint";
+
+//! global styles
+export global ROOT_GLOBAL {
+  // ...
+  out property <IIcons> icons: {
+    tabbar: {
+      email: {
+        clicked: @image-url("./assets/tabbar/email.svg"),
+        unclicked: @image-url("./assets/tabbar/email_unclicked.svg"),
+      },
+      calendar: {
+        clicked: @image-url("./assets/tabbar/calendar.svg"),
+        unclicked: @image-url("./assets/tabbar/calendar_unclicked.svg"),
+      },
+      source: {
+        clicked: @image-url("./assets/tabbar/source.svg"),
+        unclicked: @image-url("./assets/tabbar/source_unclicked.svg"),
+      },
+      more: {
+        clicked: @image-url("./assets/tabbar/more.svg"),
+        unclicked: @image-url("./assets/tabbar/more_unclicked.svg"),
+      },
+      file: {
+        clicked: @image-url("./assets/tabbar/file.svg"),
+        unclicked: @image-url("./assets/tabbar/file_unclicked.svg"),
+      },
+      connection: {
+        clicked: @image-url("./assets/tabbar/connection.svg"),
+        unclicked: @image-url("./assets/tabbar/connection_unclicked.svg"),
+      },
+    },
+    header: {
+      remind: @image-url("./assets/header/remind.svg"),
+      search: @image-url("./assets/header/search.svg"),
+    },
+    logo: @image-url("./assets/logo.svg"),
+    popover: {
+      email: @image-url("./assets/tabbar/email_unclicked.svg"),
+      unread: @image-url("./assets/popover/unread-email.svg"),
+      flag: @image-url("./assets/popover/flag.svg"),
+      pin: @image-url("./assets/popover/pin.svg"),
+      person: @image-url("./assets/popover/person.svg"),
+      link: @image-url("./assets/popover/link.svg"),
+      at: @image-url("./assets/popover/at-sign.svg"),
+    }
+  };
+}
+```
+

src/examples/outlook/step/2.md

@@ -0,0 +1,67 @@
+# Step2: Signin
+
+In Signin page, it includes two main part
+- logo and word 
+- button area
+
+## Page Part
+
+- logo and word
+  - Outlook logo: `SIcon`
+  - Outlook title: `SText`
+  - Outlook short sentence: `SText`
+- signin btn: `SButton`
+
+![](../../../static/example/signin.png)
+## Source Code
+```rust
+import { SIcon, SText, SButton } from "../modules/surrealism-ui/index.slint";
+import { ROOT-GLOBAL } from "../global.slint";
+
+
+export component Signin inherits Rectangle{
+    height: 100%;
+    width: 100%;
+    background: #fff;
+    VerticalLayout {
+        height: 52%;
+        alignment: LayoutAlignment.space-between;
+        VerticalLayout {
+            Rectangle {
+                SIcon {
+                    height: 156px;
+                    width: 156px;
+                    source: ROOT-GLOBAL.icons.logo;
+                }
+            }
+            Rectangle {
+                height: 72px;
+                SText {
+                    horizontal-alignment: TextHorizontalAlignment.center;
+                    width: 100%;
+                    text: "Outlook";
+                    color: ROOT-GLOBAL.theme-color;
+                    font-size: 46px;
+                    font-weight: 100;
+                }
+            }
+            Rectangle {
+                height: 72px;
+                SText {
+                    horizontal-alignment: TextHorizontalAlignment.center;
+                    width: 100%;
+                    text: "A better way to manage your email.";
+
+                }
+            }
+        }
+        Rectangle {
+            height: singin-btn.height;
+            singin-btn:= SButton{
+                theme: Primary;
+                text: "GET STARTED";
+            }
+        }   
+    }
+}
+```

src/examples/outlook/step/3.md

@@ -0,0 +1 @@
+# Step3: MainView

src/examples/outlook/step/4.md

@@ -0,0 +1,43 @@
+# Step4: App
+
+After Signin Page and MainView Page finish, add it into App Window
+
+use `ROOT-GLOBAL.state.is-signin` to manage signin state and use `if` to switch page
+
+## Global `is-signin`
+
+write a `State` struct to manage user state, now it only need `is-signin`
+
+```rust
+export struct State {
+    is-signin: bool,
+}
+
+export global ROOT_GLOBAL {
+  in-out property <length> window-height : 844px;
+  in-out property <length> window-width : 390px;
+  in-out property <length> font-size : 16px;
+  in-out property <length> padding : 0px;
+  out property <brush> theme-color: #0078D4;
+  // use is-signin to manage signin state
+  in-out property <State> state: {
+    is-signin: false,
+  };
+```
+
+## App Source Code
+
+```rust
+import { MainView, Signin} from "./index.slint";
+import { ROOT_GLOBAL } from "./global.slint";
+import { SText, SIcon } from "modules/surrealism-ui/index.slint";
+
+export component App inherits Window {
+  height: ROOT-GLOBAL.window-height;
+  width: ROOT-GLOBAL.window-width;
+  title: @tr("Outlook Example");
+
+  if !ROOT-GLOBAL.state.is-signin : singin:= Signin {}
+  if ROOT-GLOBAL.state.is-signin : main-view:= MainView {}
+}
+```

src/examples/outlook/step/bottom_btn.md

@@ -0,0 +1 @@
+# Step3-5: Bottom Btn

src/examples/outlook/step/content.md

@@ -0,0 +1 @@
+# Step3-4: Content

src/examples/outlook/step/content_header.md

@@ -0,0 +1 @@
+# Step3-3: Content Header

src/examples/outlook/step/header.md

@@ -0,0 +1,66 @@
+# Step3-1: Header
+
+![](../../../static/example/main-header.png)
+
+## Source Code
+
+```rust
+import { SText , SIcon} from "../modules/surrealism-ui/index.slint";
+import { ROOT-GLOBAL } from "../global.slint";
+
+export component Header inherits Rectangle{
+  height: 60px;
+  background: ROOT-GLOBAL.theme-color;
+  HorizontalLayout {
+    padding: 16px;
+    width: 100%;
+    HorizontalLayout {
+      width: logo-wrapper.width + header-txt.width;
+      alignment: space-between;
+      logo-wrapper:= Rectangle {
+        width: 40px;
+        Rectangle {
+          height: logo.height;
+          width: logo.width;
+          border-radius: self.height / 2; 
+          clip: true;
+          background: #fff;
+          logo:= SIcon {
+            height: 28px;
+            width: 28px;
+            source: ROOT-GLOBAL.icons.logo;
+          }
+        }
+      }
+      header-txt:= SText {
+        horizontal-alignment: center;
+        width: 90px;
+        text: "收件箱";
+      }
+    }
+    HorizontalLayout {
+      alignment: end;
+      HorizontalLayout {
+        spacing: 18px;
+        alignment: center;
+        Rectangle {
+          SIcon {
+            height: 18px;
+            width: 18px;
+            source: ROOT-GLOBAL.icons.header.remind;
+          }
+        }
+        Rectangle {
+          SIcon {
+            height: 18px;
+            width: 18px;
+            source: ROOT-GLOBAL.icons.header.search;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+```

src/examples/outlook/step/tabbar.md

@@ -0,0 +1 @@
+# Step3-2: Tabbar