Replies: 15 comments 19 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.
-
|
I would love see this on xournalpp ! <3 |
Beta Was this translation helpful? Give feedback.
-
|
Looks awesome, I would like to see the Xournal++ with GTK4 and Adwaita! |
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.
-
|
Nice design @rolandlo! Two things could be improved though in my opinion:
I'd love to help somehow but only know a little bit of C and nothing about designing. But if there is something to test, I could probably do that! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your feedback. Regarding the settings design I definitely agree. Either this is solved in Libadwaita (see https://gitlab.gnome.org/GNOME/libadwaita/-/issues/390 for a 3 year old issue) and we use it or we have to work around these limitations of Adw.PreferencesWindow ourselves. I also agree with the importance of minimizing the number of steps required for changing tools. The suggestion I made was certainly not optimal, but it's a good basis for discussion. Getting the Main Window design "right" and customizable enough to take into account different needs/workflows is definitely very challenging and requires the input from many users. |
Beta Was this translation helpful? Give feedback.
-
|
@rolandlo Is the transfer to libadwaita now to be considered as the way to go/is your repo the new interface in development? It would be good to know if it's worth it to invest work into contributing to this new design :) |
Beta Was this translation helpful? Give feedback.
-
|
We're still in the phase of generating ideas. We haven't decided anything and my repo is just an experiment. |
Beta Was this translation helpful? Give feedback.
-
|
@rolandlo As you are currently thinking about GTK4 and libadwaita, I wanted to ask something in relation to that, which may be a bit more general. Normally I like to have all my apps more or less follow the theme I have selected as this just looks better in my opinion. Now with libAdwaita, this has become difficult, as from what I understand, libadwaita is made to be used for GNOME apps specifically, such that GTK itself is less GNOME-specific. This just makes me wonder if you are considering this app more as a GNOME app now (at least for the linux version) instead of an app that uses GTK? |
Beta Was this translation helpful? Give feedback.
-
I still see Xournal++ as GTK app more than a GNOME app. It's just that I see the advantages that libadwaita brings. It makes it quite a bit simpler to create a coherent design and has useful widgets that are missing in Gtk. From a developer perspective that means more time to concentrate on more essential things in the app, at least if you create an app from scratch, while having the benefit of a modern look. |
Beta Was this translation helpful? Give feedback.
-
|
First, Thank you for your reply. I definitely see the advantages that libadwaita brings for ease of use while developing, be it having to write less boilerplate to get to your goal or using existing widgets so that you don't have to implement them yourself. Maybe my problem in this context is more, that if someone asks about e.g. theming or problems with making libadwaita look like the rest of the system, it's often brought up that this is a GNOME toolkit which should look good in GNOME and that they should rather use an app that is made for their desktop and not an app that is made for GNOME. The problem with that is then that there are no alternatives, because so many apps use libadwaita when moving to GTK 4 or there is just this one good and up-to-date application. This is not directly a critique of this project or its developers that want to make development easier (which i completely understandable), but it's still a problem in my eyes for users of GTK apps outside of GNOME. My opinion is also that the modern look that libadwaita provides is not as universal and I have some issue with it (too rounded, header bars too large sometimes, does not use system title bar style, etc.). This is my personal opinion to which maybe only some people agree (I have at least seen other people complain about this). I would maybe mention the XApp Project by the Linux Mint team which tries to "provide building blocks, resources and libraries to Linux developers who want to develop applications which work well in multiple DEs", but I'm not sure if this will help you in the same way as libadwaita will yet. Thanks for at least listening to me and I hope mentioning the XApp project and linking to it is fine here. EDIT: I also forgot to link an example for the claim that libadwaita is designed for GNOME primarily, so here is one example from a GNOME developer: https://discourse.gnome.org/t/what-is-libadwaita/24422/2 |
Beta Was this translation helpful? Give feedback.
-
|
libxapp provides only a quite limited set of widgets (see https://projects.linuxmint.com/xapp/reference/index.html), but now (by the same project) there is LibAdapta which is libAdwaita with theme support and a few extra. This looks pretty interesting to me. |
Beta Was this translation helpful? Give feedback.
-
Yeah, with libxapp that is the problem, but they are planning on making is more like e.g. libadwaita, where it provides more cross-desktop widgets and so on in the future. |
Beta Was this translation helpful? Give feedback.
-
|
I do not have a mock-up, but for the main UI elements, I would like to see a global index of pages on the left (ala OneNote) that allows me to navigate to a particular Xournal page/project without having to navigate up to a home space to navigate back down to another location. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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