From 0ae0b16fb0921cc68426749cdf05c64891487c23 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sun, 2 Oct 2022 00:55:37 +0200 Subject: [PATCH] Various design improvements inspired by Workbench --- data/re.sonny.Playhouse.gschema.xml | 2 +- src/application.js | 4 +- src/re.sonny.Playhouse | 1 + src/style.css | 9 ++ src/window.blp | 158 ++++++++++++++++++---------- src/window.js | 12 +-- 6 files changed, 121 insertions(+), 65 deletions(-) diff --git a/data/re.sonny.Playhouse.gschema.xml b/data/re.sonny.Playhouse.gschema.xml index 2cb84a4..4322c48 100644 --- a/data/re.sonny.Playhouse.gschema.xml +++ b/data/re.sonny.Playhouse.gschema.xml @@ -13,7 +13,7 @@ false - + true diff --git a/src/application.js b/src/application.js index e709e23..76c4da6 100644 --- a/src/application.js +++ b/src/application.js @@ -8,13 +8,13 @@ import ShortcutsWindow from "./ShortcutsWindow.js"; import { settings } from "./utils.js"; -// import "./style.css"; +import "./style.css"; export default function Application() { const application = new Adw.Application({ application_id: "re.sonny.Playhouse", // flags: Gio.ApplicationFlags.HANDLES_OPEN, - resource_base_path: "/re/sonny/Playouse/src", + resource_base_path: "/re/sonny/Playhouse/src", }); application.connect("activate", () => { diff --git a/src/re.sonny.Playhouse b/src/re.sonny.Playhouse index b8b0190..8e56577 100755 --- a/src/re.sonny.Playhouse +++ b/src/re.sonny.Playhouse @@ -5,6 +5,7 @@ import { exit } from "system"; import GLib from "gi://GLib"; import { setConsoleLogDomain } from "console"; +import Gio from "gi://Gio"; imports.package.init({ name: "@app_id@", diff --git a/src/style.css b/src/style.css index e69de29..92df66c 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,9 @@ +.view-toggler image { + margin-right: 6px; +} + +#panel_html, +#panel_css, +#panel_javascript { + border-right: solid 1px @borders; +} diff --git a/src/window.blp b/src/window.blp index df3ae47..43173b0 100644 --- a/src/window.blp +++ b/src/window.blp @@ -1,45 +1,98 @@ using Gtk 4.0; using Adw 1; +using GtkSource 5; +using WebKit2 5.0; Adw.ApplicationWindow window { default-width: 800; default-height: 600; maximized: true; - content: - Box { + content: Box { orientation: vertical; Adw.HeaderBar { [start] ToggleButton button_devtools { - label: "Devtools"; - active: true; - } + child: Adw.ButtonContent { + icon-name: "re.sonny.Playhouse-symbolic"; + label: _("_Developer Tools"); + use-underline: true; + }; + tooltip-text: _("Developer Tools (Ctrl+Shift+I)"); + } [title] Box { + spacing: 6; orientation: horizontal; - - styles [ - "linked", - ] + homogeneous: true; ToggleButton button_html { - label: "HTML"; - active: true; + child: Box { + halign: center; + + Image { + icon-name: "re.sonny.Playhouse-symbolic"; + } + + Label { + label: _("_HTML"); + use-underline: true; + } + }; + + styles ["flat", "view-toggler"] } ToggleButton button_css { - label: "CSS"; + child: Box { + halign: center; + + Image { + icon-name: "re.sonny.Playhouse-symbolic"; + } + + Label { + label: _("_CSS"); + use-underline: true; + } + }; + + styles ["flat", "view-toggler"] } ToggleButton button_javascript { - label: "JavaScript"; + child: Box { + halign: center; + + Image { + icon-name: "re.sonny.Playhouse-symbolic"; + } + + Label { + label: _("_JavaScript"); + use-underline: true; + } + }; + + styles ["flat", "view-toggler"] } - ToggleButton button_output { - label: "Output"; - active: true; + ToggleButton button_preview { + child: Box { + halign: center; + + Image { + icon-name: "re.sonny.Playhouse-symbolic"; + } + + Label { + label: _("_Preview"); + use-underline: true; + } + }; + + styles ["flat", "view-toggler"] } } @@ -56,56 +109,53 @@ Adw.ApplicationWindow window { homogeneous: true; ScrolledWindow { + name: "panel_html"; .GtkSourceView source_view_html { - buffer: .GtkSourceBuffer { - } - - ; - monospace: "true"; - auto-indent: "true"; - background-pattern: "grid"; - highlight-current-line: "true"; - indent-on-tab: "true"; - indent-width: "2"; - insert-spaces-instead-of-tabs: "true"; - show-line-marks: "true"; - show-line-numbers: "true"; - smart-backspace: "true"; - tab-width: "2"; + buffer: .GtkSourceBuffer {}; + monospace: true; + auto-indent: true; + highlight-current-line: true; + indent-on-tab: true; + indent-width: 2; + insert-spaces-instead-of-tabs: true; + show-line-marks: true; + show-line-numbers: true; + smart-backspace: true; + tab-width: 2; } } ScrolledWindow { + name: "panel_css"; .GtkSourceView source_view_css { buffer: .GtkSourceBuffer {}; - monospace: "true"; - auto-indent: "true"; - background-pattern: "grid"; - highlight-current-line: "true"; - indent-on-tab: "true"; - indent-width: "2"; - insert-spaces-instead-of-tabs: "true"; - show-line-marks: "true"; - show-line-numbers: "true"; - smart-backspace: "true"; - tab-width: "2"; + monospace: true; + auto-indent: true; + highlight-current-line: true; + indent-on-tab: true; + indent-width: 2; + insert-spaces-instead-of-tabs: true; + show-line-marks: true; + show-line-numbers: true; + smart-backspace: true; + tab-width: 2; } } - ScrolledWindow { + ScrolledWindow panel_javascript { + name: "panel_javascript"; .GtkSourceView source_view_javascript { buffer: .GtkSourceBuffer {}; - monospace: "true"; - auto-indent: "true"; - background-pattern: "grid"; - highlight-current-line: "true"; - indent-on-tab: "true"; - indent-width: "2"; - insert-spaces-instead-of-tabs: "true"; - show-line-marks: "true"; - show-line-numbers: "true"; - smart-backspace: "true"; - tab-width: "2"; + monospace: true; + auto-indent: true; + highlight-current-line: true; + indent-on-tab: true; + indent-width: 2; + insert-spaces-instead-of-tabs: true; + show-line-marks: true; + show-line-numbers: true; + smart-backspace: true; + tab-width: 2; } } diff --git a/src/window.js b/src/window.js index d4a6c29..6fef95d 100644 --- a/src/window.js +++ b/src/window.js @@ -1,5 +1,4 @@ import Gtk from "gi://Gtk"; -// import Gdk from "gi://Gdk"; import GObject from "gi://GObject"; import Gio from "gi://Gio"; import WebKit from "gi://WebKit2?version=5.0"; @@ -16,8 +15,6 @@ import resource from "./window.blp"; import { settings } from "./utils.js"; -Source.init(); - const scheme_manager = Source.StyleSchemeManager.get_default(); const language_manager = Source.LanguageManager.get_default(); const style_manager = Adw.StyleManager.get_default(); @@ -25,7 +22,6 @@ const style_manager = Adw.StyleManager.get_default(); export default function Window({ application }) { // Solves // Invalid object type 'WebKitWebView' - // Invalid object type 'GtkSourceView' // see https://stackoverflow.com/a/60128243 new WebKit.WebView(); @@ -125,7 +121,7 @@ p:hover { const button_html = builder.get_object("button_html"); const button_css = builder.get_object("button_css"); const button_javascript = builder.get_object("button_javascript"); - const button_output = builder.get_object("button_output"); + const button_preview = builder.get_object("button_preview"); const button_devtools = builder.get_object("button_devtools"); const source_views = [ @@ -163,8 +159,8 @@ p:hover { Gio.SettingsBindFlags.DEFAULT, ); settings.bind( - "show-output", - button_output, + "show-preview", + button_preview, "active", Gio.SettingsBindFlags.DEFAULT, ); @@ -196,7 +192,7 @@ p:hover { GObject.BindingFlags.SYNC_CREATE, ); - button_output.bind_property( + button_preview.bind_property( "active", web_view, "visible",