Colorizing the titlebar in macOS with multiple colors - c++

I have a Qt app that runs on macOS. I found a way to change the color of the titlebar here, however I want to take it a step further. I want to mimic the titlebar that the Slack and Discord apps use. For example:
As you can see, the color of the controls in the window extend to the very top of the app's window. I figure there are two ways to accomplish what I want:
I can build on the code pasted above. Looking through some of the Apple developer documentation, I think I can create a couple NsWindows on top of the titlebar with whatever width I want and attach the titlebar as a parent for those windows. Once I do that I should be able to make the same backgroundColor() color call for each one. Of course, this will require me to keep track of when the controls or window are resized and adjust the NsWindows of the titlebar, and I am not sure what (if any) issues that could cause.
Maybe there is a way to essentially set the height of the titlebar to 0? I wonder if that's what the Discord app is doing because:
if you look closely, the edit box that says "Find or start a conversation" is vertically lined with the close, minimize and maximize buttons, as is the "Activity" label. But if the controls do extend to the top of the app's window then how are the standard app buttons getting painted?
I'd be curious to know how Slack and Discord accomplish this even though I know they're not using Qt.
I realize there is not a Qt solution since Qt does not paint the titlebar. I know this will be OS-specific, but since I do not have any real experience with Objective-C++ or working with Cocoa (all of my programming experience on macOS has been standard C++ with non-UI or Qt-based code) I'd appreciate any suggestions or guidance!

Natively this is done with fullSizeContentView and titlebarAppearsTransparent properties of NSWindow. Once you set them to true, you can draw or place controls beneath the title bar.

Related

How to create a menubar in SFML application?

I'm trying to write an SFML 2.5.1 program, but I have faced an issue, I can't find in the internet how to create working program menubar, which is located upper window (or upper screen in Mac OS), something like this:
All I have found in the internet is a Titlebar, only first two options in menubar: File and Edit, and they are don't work for some reason, don't reacting on clicking, I can't find out why.
Help me please
You can hide the original title bar and make your own using classes (button or titlebar_button, call it as u want) which is just a rectangle shape with the on_Click function.
https://en.sfml-dev.org/forums/index.php?topic=24051.0 - Answer
https://www.sfml-dev.org/documentation/1.6/namespacesf_1_1Style.php - Style documentation (I couldn't find one for 2.5.1, but it isn't that deprecated, in new versions, there is also a Style::Deafult)
Example:
sf::Window my_Window(sf::VideoMode(640U,480U),"w",sf::Style::None)
However, you have to keep in mind, that your window won't have any border and thus won't be resizeable nor closeable until you implement this.

QWidget / QWindow title bar: custom look, native feel (similar to Chrome)

I know how to make a QWidget (in Qt4 or Qt5) / QWindow (since Qt5) borderless, draw a custom title bar and manually implement mouse dragging to move the window on the screen by simply tracking the mouse position with some mouseMoveEvent and updating the window position.
However, this movement behaves different than the native one as implemented by the window manager. For example, moving the window near the screen's border can be interpreted as "fullscreen" or "split screen"; or windows snap to each other's borders, depending on the system / window manager. These things don't work if you implement the window movement like above.
Google Chrome / Chromium is only one example for an application which implements a custom window title bar and border, while still adapting to the native behavior of the window manager. I'm wondering whether Chrome implements these by itself (and detects the window manager and its configuration) or if there is some functionality in most window managers (clearly, this is still highly platform-dependent) for telling "start native window movement" and "stop native window movement" or similar.
Is something like that possible in Qt? If not, maybe using some other libraries like Qxt?
FYI: I'm mainly targeting Windows and Linux, where I see the difficulty that the user can have any window manager installed.
Based on attempting the same with Qt4 recently, I fear the answer is, you need to tune this per-platform / per-window-manager. I expect patches to QWindow to improve the behaviour in this area would be accepted, but I'm not aware of any standard hook to tell the OS/window-manager what you're trying to achieve.
Equally Qt should be not be 'getting in the way' of solving this, it's simply an area where it can't do anything to help you in a generic way.

Adding a user interface to an image viewer plugin

I have a general question on how to develop an image viewer plugin with Firebreath. For that, I would like to incorporate a GUI framework, like wxwidget or Qt. The GUI would be used to to fire up some dialogs, adding a toolbar on top, or to open context menus with right clicking an image.
As far as I understand I have a hwnd handle and so I can draw onto a window. I also understand that I have various events I can react on, like mouse button clicks or keyboard strokes. But it fails me how I would add graphical menus, buttons, etc. I know I could use html around the window but that's not the route I like to take.
For instance, does it makes sense to render an user interface offline (in memory) onto an image and then keep somehow track of the state internally?
Has anyone done such thing? Or can anyone give me some insight on how to accomplish adding a user interface.
Assuming you only care about windows and assuming that you don't mind using a windowed plugin, which is the easiest (but no HTML elements can float over the plugin), it should be no different than creating a GUI in any other windows application.
You are given a window that shows up with the AttachedEvent; when DetachedEvent is fired you need to stop using the window. Many people create a child window inside that parent window and use that for all their actual real code which makes it a little easier to use one of those other abstractions, but that's basically all there is to it. I don't know specifically how you'd do it with QT or wxwidget but you'd create a child window of that HWND that you are given and have the abstraction do your thing for you.
As to whether or not it would be rendering things offscreen, etc, I have no idea; that would totally depend on the window system. There is no reason that I know of that you would need to do that, and most things just draw directly to the HWND, but there are a zillion different ways you could do it. It looks to me like what you really need is to understand how drawing in Windows actually works.
I hope that helps

How to create a GUI without a frame in X11?

I'm trying to figure out how to create a graphical interface, in X11, which exists outside of a window manager's/desktop environment's standard window frame. For example, when Thunderbird finds new mail, it shows a special alert in the lower right hand corner of the screen which is shown without any frame (no close/minimize buttons, etc.).
I'm specifically interested in doing this in QT with C++, but if someone knows a solution with a different graphical library, that would be helpful too.
For QT pass Qt::FramelessWindowHint as a window flag when you construct your top level widget.
See here for more info:
http://doc.qt.nokia.com/main-snapshot/qt.html#WindowType-enum
You can do this with X as well although I haven't done so in a long time.
http://www.xfree86.org/current/XCreateWindow.3.html
With GTK you would use gtk_window_set_decorated(), which would probably be Gtk::Widget->set_decorated() (I think, I don't use gtkmm).
http://developer.gnome.org/gtkmm/unstable/classGtk_1_1Window.html#a67adb1d8051a38e0e5272f141bb8778c

Divide the application screen in Qt

I want to divide the application screen into parts like one part is fixed showing fixed controls & another one is variable which can be changed when user select something. Like in Qt Creator we are having the left side column always fixed & the content of center screen is changing when user is selecting something. I have attached the screen shot. How to do it. if any one is having any idea please help me.
When you speak of the Qt Creator you certainly mean the controls on the left and right. In my opinion, the best thing to implement that are QDockWidgets. Have a look at them in the docs and as Martin said, look at the examples, they are perfect to learn each of the layout and composing issues.
QDockWidgets can be made floatable (undock them from the main window as toolboxes), they can have fixed sides to be docked on and it's easy to use them, because they can be filled with every widget you like. I often use them when I show a file explorer in an application, for example. Just look at the examples and play with it.
If you just want to have QActions visible all the time for the user, you can use a QToolBar.
You normally start with a QMainWindow and then put other toolbars, controls, widgets etc inside that.
Check out the Qt examples that come with the SDK src