Replies: 11 comments 11 replies
-
|
Here is a very first approximation:
Some explanations:
|
Beta Was this translation helpful? Give feedback.
-
|
I'd love to contribute some design ideas when I find time. I agree that moving to libadwaita makes sense with the transition to GTK4. |
Beta Was this translation helpful? Give feedback.
-
|
@osslate Awesome! I'm looking forward to it! |
Beta Was this translation helpful? Give feedback.
-
|
As a reminder (c.f. #2722 (comment) and #4372): |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I try to explain my "idea" that you can see in the sketch. 
|
Beta Was this translation helpful? Give feedback.
-
|
this is great, when it will be released I am anxious to try a new version with improvements. |
Beta Was this translation helpful? Give feedback.
-
|
@Fox76it Your design looks nice and clean and the Carousel idea looks interesting. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I don't know all the features of xournal++ so i based the interface on my needs. What i posted was made in inkscape following the models and rules (more or less) that i found in your links. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, guys! I have just met with xournalpp and I'm happy to hear a plan of UI redesign. In the past days, I'm a Drawboard PDF user. I know what I'm going to say might make some of you unhappy, but I'm just raising my advice. So take it easy pls. Although the software "Drawboard PDF" is greedy and getting worser, I must admitted that the UI's style and layout in Win10 UWP style are excellent. For people with portable PCs, which are equipped with touch screens, foldable and moveable toolbar is really convenient. File-related buttons on the left and editing toolbar on the right, I'm personally appreciate this design. Here I post 3 shots (from the Internet) of the software.
|
Beta Was this translation helpful? Give feedback.
-
|
Here is a Gtk4/Libadwaita redesign of the LaTeX tab in the Xournal++ preferences: I designed it in Workbench using the blueprint format: Click here to see the blueprint code.using Gtk 4.0;
using Adw 1;
Adw.PreferencesWindow win_prefs {
default-width: 600;
default-height: 900;
title: _("Xournal++ Preferences");
Adw.PreferencesPage page_latex {
title: _("LaTeX");
icon-name: "notepad-symbolic";
Adw.PreferencesGroup {
title: _("TeX generation settings");
description: _("Set the template file and the generation command that are used for generating TeX images.");
Adw.EntryRow {
title: _("LaTeX generation command");
text: "pdflatex -interaction=nonstopmode \'{}\'";
}
Adw.ActionRow {
title: _("Template file path");
subtitle: _("Set the file path.");
[suffix]
Button btn_template {
Adw.ButtonContent {
label: _("default_template.tex");
icon-name: "folder-documents-symbolic";
}
}
}
Adw.EntryRow {
title: _("Default LaTeX text");
text: "x^2";
}
Adw.ActionRow {
title: _("Always check LaTeX dependencies before running");
activatable-widget: sw_checkDeps;
[suffix]
Box {
spacing: 12;
Switch sw_checkDeps {
halign: center;
valign: center;
}
Button btn_check {
label: _("Check now");
styles [
"suggested-action",
]
}
}
}
}
Adw.PreferencesGroup {
title: _("Editor settings");
description: _("Set the properties of the editor used for LaTeX formulas");
Adw.ActionRow {
title: _("LaTeX editor theme");
activatable-widget: btn_theme;
[suffix]
Button btn_theme {
label: _("Cobalt");
}
}
Adw.SwitchRow {
title: _("Line numbers");
}
Adw.SwitchRow {
title: _("Auto-indent");
active: true;
}
Adw.SwitchRow {
title: _("Syntax highlighting");
active: true;
}
Adw.SwitchRow {
title: _("Wrap text");
active: true;
}
Adw.ActionRow {
title: _("Font");
[suffix]
FontDialogButton btn_font {
}
}
}
}
Adw.PreferencesPage page_loadSave {
title: _("Load/Save");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_input {
title: _("Input System");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_mouse {
title: _("Mouse");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_stylus {
title: _("Stylus");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_touchscreen {
title: _("Touchscreen");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_view {
title: _("View");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_zoom {
title: _("Zoom");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_drawing {
title: _("Drawing Area");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_defaults {
title: _("Defaults");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_audio {
title: _("Audio Recording");
icon-name: "notepad-symbolic";
}
Adw.PreferencesPage page_language {
title: _("Language");
icon-name: "notepad-symbolic";
}
}As you can observe the blueprint format is quite readable and writing them from hand is much easier than in .xml. By the way the Libadwaita
The widgets adapts quite nicely to different sizes. E.g. on a mobile phone it might look like this:
Edit: Updates images and blueprint code after using the Libadwaita 1.4 features like |
Beta Was this translation helpful? Give feedback.
-
|
Here is a first (and still very incomplete) blueprint ( + some JS) version of a redesigned application window: The sidebar (more precisely it's an utility pane here) can be switched on and off with the togglebutton on the top left. The AboutWindow and the Help (link to the website) from the primary menu (that are connected to The main content is filled with a GtkDrawingArea. In the JS code I painted on it via Cairo. |
Beta Was this translation helpful? Give feedback.
-
|
Here is a first draft of a custom highlighter button (realized as an DemoSplitButton.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Here is an improved version (two different highlighter split buttons, whose appearance reflects all highlighter options): DemoSplitButton2.mp4It is realized using widget templates. In that way it was pretty easy to put multiple of those gadgets into one box. |
Beta Was this translation helpful? Give feedback.
-
|
@nicolae-stroncea The design of the configurable highlighter button is similar like you proposed in #2431 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@rolandlo it looks great. Are you planning on the icon representing all the features(including thickness and fill) or a subset? |
Beta Was this translation helpful? Give feedback.
-
|
The icon does already represent all the features. Fill is represented by the marker icon itself (on the video start frame the green marker is filled, the red marker isn't). Thickness is represented by the size of the line style icon displayed below. The right button represents thickness thick, the left thickness fine. |
Beta Was this translation helpful? Give feedback.
-
|
looks great in that case :) |
Beta Was this translation helpful? Give feedback.
-
|
Here is an update on my experiments with a Gtk 4/Libadwaita redesign in https://github.com/rolandlo/xournalpp-libadwaita-mockup. I took some inspiration from @Fox76it's and @LiuJiewenTT's suggestions. Before anyone complains it's not decided whether we'll use Libadwaita at all, but we surely will migrate to Gtk 4. I used Libadwaita mainly to try it out and to get quicker results. It would be possible to replace some (maybe most or even all) Libadwaita widgets with custom widgets without losing too much, it just takes more work. Gtk 4 allows a much easier creation of widgets than Gtk 3, which is pretty nice. xournalpp-redesign-demo.webmSome highlights:
From a technical standpoint there are also some interesting novelties (compared to current Xournal++):
I'm looking forward for any feedback. Even though you may not agree with lots of choices made, I think it helps getting concrete and trying out some ideas while getting used to Gtk 4 and its new features. |
Beta Was this translation helpful? Give feedback.
-
|
This is so much like what I expected. I like this design very much. However, I don't see any alternative thin floating toolbar. If there isn't one, I would still feel a bit uncomfortable. I used to write with my right hand and switch tools and colors with my left hand, which means I don't have to have my right hand do too much work and leaving the miscellaneous to the idle hand. Would this better? |
Beta Was this translation helpful? Give feedback.
-
|
One thing that should be considered is that it could be useful to have an option to use a icon/sidebar or adjust which things can be accessed directly. |
Beta Was this translation helpful? Give feedback.
-
|
Is there an approximate ETA for this? The design looks mighty nice and its hard to wait for this amazing update to come to the pc |
Beta Was this translation helpful? Give feedback.
-
|
I'm glad you like the design. There is no ETA for this, as
The Gtk3 to Gtk4 migration has come a lot closer, see #5615, so once that is done I will continue my experiments with a redesign. |
Beta Was this translation helpful? Give feedback.
-
In prospect of moving to Gtk 4 (which will take quite some time) we should consider redesigning the app using libadwaita. Since redesigning the app is largely independent to moving to Gtk 4 (and other code changes), it makes sense to start now. Also I hope that some people with designer capabilities come here and contribute their ideas
Some reasons for a redesign:
Resources:
gtk4-builder-tool simplify --3to4 <filename.glade>allows to convert Gtk3.gladefiles to Gtk4.uifiles..uifiles and the much more legible.blpfiles (Blueprint format)This thread is supposed to discuss the redesign and create some first mockups. I will start with a first approximation.
Beta Was this translation helpful? Give feedback.
All reactions