From 98d7abb3a7222cb8b32cf0be3a3522cc51d63947 Mon Sep 17 00:00:00 2001
From: Selma Ndi <datagirlcmr@gmail.com>
Date: Thu, 22 Jun 2023 00:07:25 +0100
Subject: [PATCH] Library: Add StatusPage Demo (#256)

* Create a Scrollbar Folder in demos

add a main.blp, a main.css, a main.js and a main.json file
implement basic display of a scrollbar and style it

* add a default status page that can be customized

* Add dynamism on the status page

add test cases and different displays based on input
update the main.json file with sample data

* move the scrollbar demo to a different feature

* add the missing js components in Blueprint

* take out uneccessary lines in main.js

* change the color in main.css to a named color

* debug a persistent file issue

* made recommended fixes

* update widgets to follow Gnome standards

Display not consistent with what was required
Help in centralising all content and increasing the size of the search field

* format the code to meet gnome standards

* fix: dangling comma in JSON

---------

Co-authored-by: Andy Holmes <andrew.g.r.holmes@gmail.com>
---
 src/Library/demos/Status Page/main.blp  | 44 +++++++++++++++++++++++++
 src/Library/demos/Status Page/main.css  |  0
 src/Library/demos/Status Page/main.js   | 15 +++++++++
 src/Library/demos/Status Page/main.json | 10 ++++++
 4 files changed, 69 insertions(+)
 create mode 100644 src/Library/demos/Status Page/main.blp
 create mode 100644 src/Library/demos/Status Page/main.css
 create mode 100644 src/Library/demos/Status Page/main.js
 create mode 100644 src/Library/demos/Status Page/main.json

diff --git a/src/Library/demos/Status Page/main.blp b/src/Library/demos/Status Page/main.blp
new file mode 100644
index 000000000..1f1be38ed
--- /dev/null
+++ b/src/Library/demos/Status Page/main.blp	
@@ -0,0 +1,44 @@
+using Gtk 4.0;
+using Adw 1;
+
+Box {
+  orientation: vertical;
+  margin-top: 10;
+  vexpand:true;
+
+    Box {
+      spacing: 12;
+      orientation:horizontal;
+      halign:center;
+
+        Entry entry_1 {
+          placeholder-text: _("Type to Start Searching… (Keywords: Error, No results)");
+        }
+
+        Button submit_button {
+          name: "submit";
+          label: _("Submit");
+        }
+      }
+
+    Adw.StatusPage content {
+      title: _("No results found");
+      description: _("Try a different Search.");
+      icon-name: 'edit-find-symbolic';
+
+      Box {
+        margin-top: 18;
+        orientation:horizontal;
+        halign:center;
+
+          LinkButton {
+            label: "API Reference";
+            uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.0.0-alpha.1/class.StatusPage.html";
+          }
+          LinkButton {
+            label: " Entry Tutorial";
+            uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/entry.html";
+          }
+      }
+    }
+}
diff --git a/src/Library/demos/Status Page/main.css b/src/Library/demos/Status Page/main.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/Library/demos/Status Page/main.js b/src/Library/demos/Status Page/main.js
new file mode 100644
index 000000000..f3c6d57ff
--- /dev/null
+++ b/src/Library/demos/Status Page/main.js	
@@ -0,0 +1,15 @@
+const content = workbench.builder.get_object("content");
+const entry = workbench.builder.get_object("entry_1");
+const button = workbench.builder.get_object("submit_button");
+
+button.connect("clicked", () => {
+  const text = entry.get_text();
+  if (text === "Error") {
+    content.title = "Error connecting to server";
+  } else if (text === "No results") {
+    content.title = "No results found";
+  } else {
+    content.title = "No content available for this keyword.";
+  }
+});
+
diff --git a/src/Library/demos/Status Page/main.json b/src/Library/demos/Status Page/main.json
new file mode 100644
index 000000000..0fa19c22f
--- /dev/null
+++ b/src/Library/demos/Status Page/main.json	
@@ -0,0 +1,10 @@
+{
+  "name": "Status Page",
+  "category": "user_interface",
+  "description": "A page used for empty/error states and similar use-cases.",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}