From 405459e93be718b0e6aad26746036105dd3f3226 Mon Sep 17 00:00:00 2001 From: dec05eba Date: Sat, 3 Nov 2018 06:04:57 +0100 Subject: Improve top bar, have to fix banding... --- css/style.css | 30 ++++++++++++++++++++++-------- images/settings-icon.png | Bin 0 -> 1715 bytes images/top-bar-background.png | Bin 0 -> 9583 bytes images/top-bar-background.png~ | Bin 0 -> 8807 bytes src/ChatWindow.cpp | 26 ++++++++++++++++++++------ src/ImageButton.cpp | 5 +++-- src/Window.cpp | 12 +++++++++++- 7 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 images/settings-icon.png create mode 100644 images/top-bar-background.png create mode 100644 images/top-bar-background.png~ diff --git a/css/style.css b/css/style.css index 7b82820..b48451f 100644 --- a/css/style.css +++ b/css/style.css @@ -29,6 +29,8 @@ scrolledwindow { grid { border-style: none; + margin: 0px; + padding: 0px; } paned { @@ -95,9 +97,24 @@ separator { } #top-bar { - background-color: #36393e; + background: none; box-shadow: 0px 0px 5px #1d1d1d; - padding: 10px 10px 10px 10px; +} + +#top-bar-search { + font-size: 16px; +} + +#top-bar-left { + background-color: #36393e; + padding: 10px; +} + +#top-bar-right { + background-image: linear-gradient(to right, rgba(54, 57, 62, 1.0), rgba(54, 57, 62, 0.1)), url("../images/top-bar-background.png"); + padding: 10px; + padding-left: 20px; + background-repeat: no-repeat; } #current-room-title { @@ -110,10 +127,6 @@ separator { background-color: #36393e; padding: 10px 10px 10px 10px; border: 1px solid #36393e; - /* - margin-right: 20px; - box-shadow: 0px 0px 5px #1d1d1d; - */ } #left-panel separator { @@ -201,13 +214,14 @@ textview text { #chat-scroll-view { background-color: #444444; + /* margin-top: 15px; margin-bottom: 15px; margin-left: 20px; margin-right: 20px; + */ + padding: 15px; box-shadow: 0px 0px 5px #1d1d1d; - padding: 10px; - /*padding: 10px 10px 10px 10px;*/ } /* #chat-input { diff --git a/images/settings-icon.png b/images/settings-icon.png new file mode 100644 index 0000000..9838a5b Binary files /dev/null and b/images/settings-icon.png differ diff --git a/images/top-bar-background.png b/images/top-bar-background.png new file mode 100644 index 0000000..fc3e6e9 Binary files /dev/null and b/images/top-bar-background.png differ diff --git a/images/top-bar-background.png~ b/images/top-bar-background.png~ new file mode 100644 index 0000000..0c8d339 Binary files /dev/null and b/images/top-bar-background.png~ differ diff --git a/src/ChatWindow.cpp b/src/ChatWindow.cpp index 273f0e0..b53e337 100644 --- a/src/ChatWindow.cpp +++ b/src/ChatWindow.cpp @@ -57,17 +57,31 @@ namespace dchat topbar.set_hexpand(true); attach(topbar, 0, 0, 2, 1); - topbarSearchBar.set_size_request(175); + Gtk::Grid *topbarLeft = Gtk::manage(new Gtk::Grid()); + topbarLeft->set_name("top-bar-left"); + topbarLeft->set_size_request(180); + topbarLeft->set_valign(Gtk::ALIGN_CENTER); + topbarLeft->set_halign(Gtk::ALIGN_CENTER); + topbar.attach(*topbarLeft, 0, 0, 1, 1); + topbarSearchBar.set_name("top-bar-search"); topbarSearchBar.set_placeholder_text("Search..."); - topbar.attach(topbarSearchBar, 0, 0, 1, 1); + topbarSearchBar.set_size_request(180); + topbarLeft->attach(topbarSearchBar, 0, 0, 1, 1); - Gtk::Alignment *topbarSpacer = Gtk::manage(new Gtk::Alignment()); - topbarSpacer->set_size_request(50); - topbar.attach_next_to(*topbarSpacer, topbarSearchBar, Gtk::POS_RIGHT, 1, 1); + Gtk::Grid *topbarRight = Gtk::manage(new Gtk::Grid()); + topbarRight->set_name("top-bar-right"); + topbarRight->set_hexpand(true); + topbarRight->set_valign(Gtk::ALIGN_CENTER); + topbar.attach_next_to(*topbarRight, *topbarLeft, Gtk::POS_RIGHT, 1, 1); currentChannelTitle.set_name("current-room-title"); - topbar.attach_next_to(currentChannelTitle, *topbarSpacer, Gtk::POS_RIGHT, 1, 1); + currentChannelTitle.set_hexpand(true); + currentChannelTitle.set_alignment(Gtk::ALIGN_START, Gtk::ALIGN_CENTER); + topbarRight->attach(currentChannelTitle, 0, 0, 1, 1); + + ImageButton *channelSettings = Gtk::manage(new ImageButton("images/settings-icon.png", nullptr)); + topbarRight->attach_next_to(*channelSettings, currentChannelTitle, Gtk::POS_RIGHT, 1, 1); } void ChatWindow::setupLeftPanel(Gtk::Paned *sidePanels) diff --git a/src/ImageButton.cpp b/src/ImageButton.cpp index 17939f7..925e538 100644 --- a/src/ImageButton.cpp +++ b/src/ImageButton.cpp @@ -3,9 +3,10 @@ namespace dchat { - ImageButton::ImageButton(const char *filepath, const char *text) : - Gtk::Button(text) + ImageButton::ImageButton(const char *filepath, const char *text) { + if(text) + set_label(text); Gtk::Image *image = Gtk::manage(new Gtk::Image(filepath)); set_always_show_image(true); set_image(*image); diff --git a/src/Window.cpp b/src/Window.cpp index e8129f0..8b23aa9 100644 --- a/src/Window.cpp +++ b/src/Window.cpp @@ -249,8 +249,18 @@ namespace dchat } } cairo->stroke(); - overlay.draw(cairo); + /* + int windowMax = std::max(windowWidth/2, windowHeight/2); + auto backgroundGradient = Cairo::RadialGradient::create(windowWidth/2, windowHeight/2, 0.0, windowWidth/2, windowHeight/2, windowMax*1.35); + backgroundGradient->add_color_stop_rgba(0.0, 0.0, 0.0, 0.0, 0.0); + backgroundGradient->add_color_stop_rgba(1.0, 0.1843137254901961, 0.19215686274509805, 0.21176470588235294, 1.0); + cairo->set_source(backgroundGradient); + cairo->mask(backgroundGradient); + //cairo->paint(); + */ + + overlay.draw(cairo); queue_draw(); return true; } -- cgit v1.2.3