From cebbec225fe2ebd75d11bb132aec3ba06a1c0e0c Mon Sep 17 00:00:00 2001 From: Shirley Fang Date: Tue, 19 Dec 2023 12:45:52 -0500 Subject: [PATCH 1/4] Update README --- README.md | 19 ++++++++++++++++++- src/index.css | 0 2 files changed, 18 insertions(+), 1 deletion(-) delete mode 100644 src/index.css diff --git a/README.md b/README.md index d852db6e5..0b8a584c1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,24 @@ # Iotum Sample Apps ## Overview -Explore the capabilities of Iotum SDK products through this sample application. Access the app here: [Iotum Sample Apps](https://iotum.github.io/iotum-samples/). +Explore the capabilities of Iotum SDK products through this sample application. Access the app here: [Iotum Sample Apps](https://iotum.github.io/iotum-samples/). + +

Below is a brief introduction of each sample:

+

Tabbed dashboard: View Sample
+This sample shows how to integrate one or more of Iotum's features into your application using tabs. The user lands on the 'parent' application page, which would be a home or calling page, and this has three additional tabs for 'Team Chat', 'Drive', and 'Contacts'. The Iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on 'Team Chat' for example, our widget renders.

+ +

Chat room list: View Sample
+In this sample, the 'Team Chat' navigation will show as a strip in a narrow sidebar. Users can then select an individual chat 'room' (channel or DM) that will open in a floating window inside their application. The size and location of each floating window can be customized and the sidebar can be hidden or shown as required. This is a very flexible way of integrating the chat widget into another application.

+ +

Simple Meeting: View Sample
+This sample is an example of one of our most common integrations. This meeting widget can be used for almost any kind of application, from telehealth to a standard video call. The developer initiates a meeting for the user inside a container that can be controlled in a myriad of ways. This could be a floating window, in a tab, or a particular section of the page. The size, shape, and location are fully customizable.

+ +

List widget: View Sample
+In this sample, the parent application is in full control of how the user gets to the chat room. The user will perhaps see a list of contacts with a chat icon next to each name instead of seeing the 'Team Chat' sidebar UI. After clicking on that icon, a container will open with the chat conversation displayed. This container could be a floating window or could fill a large section of the window. The size, shape, and location are fully customizable. This is useful if you want to control how a user gets into a specific chat room with different people.

+ +

Popout chat: View Sample
+This sample shows two distinct options. The first is that a user can access 'Team Chat' via a button that could be located anywhere on the parent application and have the unread message count synced so that they know if there are new messages to read. The second is that this shows how the widget can pop out into another tab or window where that is the desired user experience.
+This app also shows how the parent app can display the number of unread messages and keep it up to date. This unread message badge could be added to a button or tab in the parent app.

## Getting Started with the Application diff --git a/src/index.css b/src/index.css deleted file mode 100644 index e69de29bb..000000000 From 5d54f8d0e3ff83132a2035e2930f3b820a833cf0 Mon Sep 17 00:00:00 2001 From: Shirley Fang <109609935+shirleyfyx@users.noreply.github.com> Date: Tue, 19 Dec 2023 13:02:42 -0500 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0b8a584c1..31f05e7ce 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ## Overview Explore the capabilities of Iotum SDK products through this sample application. Access the app here: [Iotum Sample Apps](https://iotum.github.io/iotum-samples/). -

Below is a brief introduction of each sample:

+

Below is a brief description of each sample:

Tabbed dashboard: View Sample
This sample shows how to integrate one or more of Iotum's features into your application using tabs. The user lands on the 'parent' application page, which would be a home or calling page, and this has three additional tabs for 'Team Chat', 'Drive', and 'Contacts'. The Iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on 'Team Chat' for example, our widget renders.

From d07f949823fc1a7968f0b289022465c2512492ef Mon Sep 17 00:00:00 2001 From: Shirley Fang Date: Tue, 19 Dec 2023 13:36:09 -0500 Subject: [PATCH 3/4] Add descriptions for each samples on the Menu Page --- src/pages/menu-page/MenuPage.css | 31 +++++++++++++++++++++---------- src/pages/menu-page/MenuPage.js | 25 ++++++++++++++++++++----- 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/pages/menu-page/MenuPage.css b/src/pages/menu-page/MenuPage.css index cf5949249..19271b4ac 100644 --- a/src/pages/menu-page/MenuPage.css +++ b/src/pages/menu-page/MenuPage.css @@ -1,11 +1,22 @@ .menu-container { - position: flex; - flex-direction: column; - align-items: center; - color: rgb(1, 1, 1); - } - - h1 { - margin-bottom: 20px; - font-size: 36px; - } \ No newline at end of file + display: flex; + flex-direction: column; + align-items: center; + color: rgb(1, 1, 1); +} + +h1 { + margin-bottom: 20px; + font-size: 36px; +} + +.menu-item { + display: flex; + flex-direction: column; /* Stack items vertically */ + align-items: center; /* Center align items */ +} + +.description { + text-align: center; /* Center-align the description text */ + max-width: 1200px; +} diff --git a/src/pages/menu-page/MenuPage.js b/src/pages/menu-page/MenuPage.js index d049d313b..aad718a50 100644 --- a/src/pages/menu-page/MenuPage.js +++ b/src/pages/menu-page/MenuPage.js @@ -15,11 +15,26 @@ const Menu = () => { return (

Iotum Sample Apps

- - - - - +
+

This sample shows how to integrate one or more of iotum’s features into your application using tabs. The user lands on the ‘parent’ application page, which would be a home or calling page, and this has three additional tabs for ‘Team Chat’, ‘Drive’, and ‘Contacts’. The iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on ‘Team Chat’ for example, our widget renders.

+ +
+
+

In this sample, the ‘Team Chat’ navigation will show as a strip in a narrow sidebar. Users can then select an individual chat ‘room’ (channel or DM) that will open in a floating window inside their application. The size and location of each floating window can be customized and the sidebar can be hidden or shown as required. This is a very flexible way of integrating the chat widget into another application.

+ +
+
+

This sample is an example of one of our most common integrations. This meeting widget can be used for almost any kind of application, from telehealth to a standard video call. The developer initiates a meeting for the user inside a container that can be controlled in a myriad of ways. This could be a floating window, in a tab, or a particular section of the page. The size, shape, and location are fully customizable.

+ +
+
+

In this sample, the parent application is in full control of how the user gets to the chat room. The user will perhaps see a list of contacts with a chat icon next to each name instead of seeing the ‘Team Chat’ sidebar UI. After clicking on that icon, a container will open with the chat conversation displayed. This container could be a floating window or could fill a large section of the window. The size, shape, and location are fully customizable. This is useful if you want to control how a user gets into a specific chat room with different people.

+ +
+
+

This sample shows two distinct options. The first is that a user can access ‘Team Chat’ via a button that could be located anywhere on the parent application and have the unread message count synced so that they know if there are new messages to read. The second is that this shows how the widget can pop out into another tab or window where that is the desired user experience. This app also shows how the parent app can display the number of unread messages and keep it up to date. This unread message badge could be added to a button or tab in the parent app.

+ +
); From cca1a38cd0f0be29047d114a8e1f59b265537864 Mon Sep 17 00:00:00 2001 From: Shirley Fang Date: Tue, 19 Dec 2023 14:02:54 -0500 Subject: [PATCH 4/4] Uncapitalize the company's name --- README.md | 8 ++++---- src/components/CredentialsForm.js | 2 +- src/pages/menu-page/MenuPage.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 31f05e7ce..831606329 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -# Iotum Sample Apps +# iotum Sample Apps ## Overview -Explore the capabilities of Iotum SDK products through this sample application. Access the app here: [Iotum Sample Apps](https://iotum.github.io/iotum-samples/). +Explore the capabilities of iotum SDK products through this sample application. Access the app here: [iotum Sample Apps](https://iotum.github.io/iotum-samples/).

Below is a brief description of each sample:

Tabbed dashboard: View Sample
-This sample shows how to integrate one or more of Iotum's features into your application using tabs. The user lands on the 'parent' application page, which would be a home or calling page, and this has three additional tabs for 'Team Chat', 'Drive', and 'Contacts'. The Iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on 'Team Chat' for example, our widget renders.

+This sample shows how to integrate one or more of iotum's features into your application using tabs. The user lands on the 'parent' application page, which would be a home or calling page, and this has three additional tabs for 'Team Chat', 'Drive', and 'Contacts'. The iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on 'Team Chat' for example, our widget renders.

Chat room list: View Sample
In this sample, the 'Team Chat' navigation will show as a strip in a narrow sidebar. Users can then select an individual chat 'room' (channel or DM) that will open in a floating window inside their application. The size and location of each floating window can be customized and the sidebar can be hidden or shown as required. This is a very flexible way of integrating the chat widget into another application.

@@ -34,7 +34,7 @@ This app also shows how the parent app can display the number of unread messages - For the Simple Meeting Sample App, an access code is required. The access code is the conference number found in the `Meet` dashboard. 4. **Using the Application**: - - Once logged in, you're ready to explore the various features of the Iotum product suite through the Menu page. + - Once logged in, you're ready to explore the various features of the iotum product suite through the Menu page. > **Note:** For guidance on retrieving the SSO Token and Host ID via Postman, refer to the project's [Postman Documentation](https://github.com/iotum/iotum-samples/wiki/Get-SSO-Token-and-Host-ID-from-Postman). diff --git a/src/components/CredentialsForm.js b/src/components/CredentialsForm.js index b9bdddc3d..5dc2abf3d 100644 --- a/src/components/CredentialsForm.js +++ b/src/components/CredentialsForm.js @@ -15,7 +15,7 @@ const CredentialsForm = ({ onSubmit }) => { return (
-

Iotum Sample Apps

+

iotum Sample Apps