library: Add Level Bars entry (#238)

Author: AkshayWarrier

src/Library/demos/Level Bars/main.blp

@@ -0,0 +1,81 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: _("Level Bars");
+  description: _("A bar widget used as a level indicator");
+
+  Box {
+    orientation: vertical;
+    margin-top: 24;
+    halign: center;
+
+    Box {
+      orientation: vertical;
+      spacing: 18;
+      margin-start: 18;
+      margin-end: 18;
+
+      Label {
+        label: _("Continuous");
+      }
+
+      Box {
+        orientation: vertical;
+        spacing: 12;
+
+        Label {
+          halign: start;
+          margin-start: 12;
+          margin-top: 12;
+          label: _("Battery");
+        }
+
+        LevelBar bar_continuous{
+            mode: continuous;
+            margin-start:12;
+            margin-end:12;
+            margin-bottom: 24;
+            min-value:0;
+            max-value:100;
+            value: 50;
+        }
+        styles ["card"]
+        margin-bottom: 24;
+      }
+
+
+      Label {
+        label: _("Discrete");
+      }
+
+      PasswordEntry entry {
+        placeholder-text: "Choose a Password";
+        show-peek-icon: true;
+      }
+      LevelBar bar_discrete {
+        mode: discrete;
+        min-value: 0;
+        max-value: 6;
+      }
+      Label label_strength {
+
+      }
+    }
+
+    Box {
+      orientation: vertical;
+      margin-bottom: 24;
+
+      LinkButton {
+        label: "Tutorial";
+        uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/level_bar.html";
+      }
+
+      LinkButton {
+        label: "API Reference";
+        uri: "https://docs.gtk.org/gtk4/class.LevelBar.html";
+      }
+    }
+  }
+}

src/Library/demos/Level Bars/main.css

@@ -0,0 +1,43 @@
+levelbar block.full {
+    background-color: @success_color;
+}
+
+levelbar block.half {
+  background-color: @warning_color;
+}
+
+levelbar block.low {
+  background-color: @error_color;
+}
+
+levelbar block.very-weak {
+  background-color: @red_4;
+}
+
+levelbar block.weak {
+  background-color: @orange_4;
+}
+
+levelbar block.moderate {
+  background-color: @yellow_4;
+}
+
+levelbar block.strong {
+  background-color: @green_4;
+}
+
+.very-weak-label {
+  color: @red_4;
+}
+
+.weak-label {
+  color: @orange_4;
+}
+
+.moderate-label {
+  color: @yellow_4;
+}
+
+.strong-label {
+  color: @green_4;
+}

src/Library/demos/Level Bars/main.js

@@ -0,0 +1,52 @@
+const bar_continuous = workbench.builder.get_object("bar_continuous");
+
+bar_continuous.add_offset_value("full", 100);
+bar_continuous.add_offset_value("half", 50);
+bar_continuous.add_offset_value("low", 25);
+
+const bar_discrete = workbench.builder.get_object("bar_discrete");
+
+bar_discrete.add_offset_value("very-weak", 1);
+bar_discrete.add_offset_value("weak", 2);
+bar_discrete.add_offset_value("moderate", 4);
+bar_discrete.add_offset_value("strong", 6);
+
+const entry = workbench.builder.get_object("entry");
+const label_strength = workbench.builder.get_object("label_strength");
+
+entry.connect("notify::text", () => {
+  estimatePasswordStrength();
+});
+
+// This is not a secure way to estimate password strength
+// Use appropriate solutions instead
+// such as https://github.com/dropbox/zxcvbn
+function estimatePasswordStrength() {
+  const level = Math.min(Math.ceil(entry.text.length / 2), 6);
+
+  switch (level) {
+    case 1:
+      label_strength.label = "Very Weak";
+      label_strength.css_classes = ["very-weak-label"];
+      break;
+    case 2:
+      label_strength.label = "Weak";
+      label_strength.css_classes = ["weak-label"];
+      break;
+    case 3:
+    case 4:
+      label_strength.label = "Moderate";
+      label_strength.css_classes = ["moderate-label"];
+      break;
+    case 5:
+    case 6:
+      label_strength.label = "Strong";
+      label_strength.css_classes = ["strong-label"];
+      break;
+    default:
+      label_strength.label = "";
+      label_strength.css_classes = [];
+  }
+
+  bar_discrete.value = level;
+}

src/Library/demos/Level Bars/main.json

@@ -0,0 +1,10 @@
+{
+  "name": "Level Bars",
+  "category": "user_interface",
+  "description": "A bar widget used as a level indicator",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}