From 64ab3253562be80e726b3d69e4c3e556b055c965 Mon Sep 17 00:00:00 2001 From: dec05eba Date: Sat, 17 Nov 2018 15:20:49 +0100 Subject: Auto reload css on modify, improve design --- css/style.css | 100 +++++++++++++++++++++++++++++++++----------- include/ChatWindow.hpp | 8 ++-- include/ResponsivePaned.hpp | 16 +++++++ run.sh | 4 +- src/ChatMessage.cpp | 8 ++-- src/ChatWindow.cpp | 27 ++++++------ src/ResponsivePaned.cpp | 36 ++++++++++++++++ src/RoomSettingsWindow.cpp | 5 ++- src/Window.cpp | 2 +- src/main.cpp | 33 ++++++++++++--- 10 files changed, 184 insertions(+), 55 deletions(-) create mode 100644 include/ResponsivePaned.hpp create mode 100644 src/ResponsivePaned.cpp diff --git a/css/style.css b/css/style.css index 1c34440..64244fa 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,9 @@ +@keyframes ripple_effect { + to { + background-size: 1000% 1000%; + } +} + * { font-family: Lato; } @@ -14,7 +20,7 @@ entry { caret-color: #f7f7f7; background-color: #444444; border-color: #444444; - border-radius: 10px; + border-radius: 4px; color: #f7f7f7; box-shadow: none; } @@ -44,17 +50,59 @@ scrollbar { } button { - background-image: none; - background-color: #36393e; - color: #f7f7f7; - border-style: none; - outline-style: none; + /* + min-height: 24px; + min-width: 16px; + */ + /*padding: 6px 10px;*/ + border: none; + font-weight: 500; + transition: 100ms, background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); + /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;*/ box-shadow: none; text-shadow: none; + background-color: #36393e; + background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + color: rgba(0, 0, 0, 0.62); +} + +button:hover { + background-color: #4c5057; + /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;*/ + color: rgba(0, 0, 0, 0.87); +} + +button:active { + transition: 100ms, background-size 0, background-image 0; + animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.08);*/ + background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); + background-size: 0% 0%; + color: rgba(0, 0, 0, 0.87); +} + +button:disabled { + box-shadow: none; + background-color: rgba(0, 0, 0, 0.12); + color: rgba(0, 0, 0, 0.26); +} + +button:checked { + background-color: #4c5057; + color: white; +} + +button:checked:disabled { + background-color: rgba(66, 133, 244, 0.3); + color: rgba(66, 133, 244, 0.5); } .confirm-button { background-color: #3060d8; + color: #f7f7f7; } menu { @@ -102,13 +150,15 @@ treeview { } .side-panels separator { - border: 1px solid #2f3136; - background-color: #2f3136; + border: none; + background-color: #36393e; + box-shadow: 0px 0px 3px #1d1d1d; } #top-bar { background: none; - box-shadow: 0px 0px 5px #1d1d1d; + box-shadow: 0px 0px 3px #1d1d1d; + border: none; } #top-bar-search { @@ -141,8 +191,9 @@ treeview { .left-panel separator { border: 1px solid #36393e; - border-top: 3px solid #444444; + border-top: 3px dashed #444444; background-color: #36393e; + box-shadow: none; } #channels-title { @@ -151,39 +202,33 @@ treeview { font-size: 16px; } -.room-button { - background: none; -} - .users-title { color: #f7f7f7; font-weight: bold; font-size: 16px; } -#chat-panel { - background-color: #444444; -} - -#chat-area-layout { +#message-area-layout { margin-top: 10px; margin-bottom: 10px; } -.chat-message { +.message-message { color: white; background-color: #36393e; padding: 15px 15px 15px 15px; margin: 10px 20px 10px 20px; - box-shadow: 0px 0px 5px #1d1d1d; + box-shadow: 2px 2px 3px #1d1d1d; + border: 3px solid transparent; + border-radius: 3px; } -.chat-message-username { +.message-message-username { color: #0fc0fc; font-size: 14px; } -.chat-message-text { +.message-message-text { font-size: 13px; } @@ -223,6 +268,10 @@ textview text { } */ +#chat-area { + border-top: 2px solid #2f3136; +} + #chat-scroll-view { background-color: #444444; /* @@ -232,7 +281,6 @@ textview text { margin-right: 20px; */ padding: 15px; - box-shadow: 0px 0px 5px #1d1d1d; } /* #chat-input { @@ -259,4 +307,6 @@ textview text { .username-list-username { color: #0fc0fc; font-weight: bold; -} \ No newline at end of file +} + +undershoot.top, undershoot.right, undershoot.bottom, undershoot.left { background-size: 0px 0px; } \ No newline at end of file diff --git a/include/ChatWindow.hpp b/include/ChatWindow.hpp index 48bbff5..b0f4001 100644 --- a/include/ChatWindow.hpp +++ b/include/ChatWindow.hpp @@ -5,10 +5,10 @@ #include "RoomNotificationsWindow.hpp" #include #include -#include +#include #include #include -#include +#include "ResponsivePaned.hpp" #include #include #include @@ -42,7 +42,7 @@ namespace dchat Window *window; private: void setupTopbar(); - void setupLeftPanel(Gtk::Paned *sidePanels); + void setupLeftPanel(Gtk::ResponsivePaned *sidePanels); void setupMessageArea(Gtk::Grid *rightPanel); void setupChatInput(Gtk::Grid *rightPanel); @@ -61,7 +61,7 @@ namespace dchat { Gtk::Grid *leftPanelUsersLayout; Gtk::Grid *messageAreaLayout; - Gtk::ToggleButton *button; + Gtk::RadioButton *button; }; odhtdb::MapHash roomDataById; diff --git a/include/ResponsivePaned.hpp b/include/ResponsivePaned.hpp new file mode 100644 index 0000000..8f62791 --- /dev/null +++ b/include/ResponsivePaned.hpp @@ -0,0 +1,16 @@ +#ifndef RESPONSIVE_PANED_HPP +#define RESPONSIVE_PANED_HPP + +#include + +namespace Gtk +{ + class ResponsivePaned : public Paned + { + public: + explicit ResponsivePaned(Orientation orientation = ORIENTATION_HORIZONTAL); + virtual ~ResponsivePaned() {} + }; +} + +#endif // RESPONSIVE_PANED_HPP \ No newline at end of file diff --git a/run.sh b/run.sh index b78f4e8..39d61ff 100755 --- a/run.sh +++ b/run.sh @@ -14,4 +14,6 @@ if [ ! -f ~/.local/share/fonts/Lato-Bold.ttf ]; then fc-cache fi platform=`sibs platform` -env GTK_THEME="css/style.css" ./sibs-build/$platform/debug/dchat +set GDK_SYNCHRONIZE +export LD_PRELOAD=/lib/libSegFault.so +env GTK_THEME="css/style.css" ./sibs-build/$platform/debug/dchat --g-fatal-warnings diff --git a/src/ChatMessage.cpp b/src/ChatMessage.cpp index 98d7f88..aa96abd 100644 --- a/src/ChatMessage.cpp +++ b/src/ChatMessage.cpp @@ -10,23 +10,23 @@ namespace dchat avatar.set_halign(Gtk::ALIGN_START); avatar.set_valign(Gtk::ALIGN_START); avatar.set_size_request(50, 50); - //avatar.url = "https://discordemoji.com/assets/emoji/7752_PepePOOGERSFAST.gif"; + avatar.url = "https://discordemoji.com/assets/emoji/PoggersHype.gif"; username.set_selectable(true); username.set_alignment(Gtk::ALIGN_START, Gtk::ALIGN_START); - username.get_style_context()->add_class("chat-message-username"); + username.get_style_context()->add_class("message-message-username"); text.set_selectable(true); text.set_alignment(Gtk::ALIGN_START, Gtk::ALIGN_START); text.set_line_wrap(true); text.set_line_wrap_mode(Pango::WRAP_WORD_CHAR); text.set_vexpand(true); - text.get_style_context()->add_class("chat-message-text"); + text.get_style_context()->add_class("message-message-text"); attach(avatar, 0, 0, 1, 2); attach_next_to(username, avatar, Gtk::POS_RIGHT, 1, 1); attach_next_to(text, username, Gtk::POS_BOTTOM, 1, 1); - get_style_context()->add_class("chat-message"); + get_style_context()->add_class("message-message"); set_column_spacing(10); set_row_spacing(0); diff --git a/src/ChatWindow.cpp b/src/ChatWindow.cpp index 473b5d1..529b857 100644 --- a/src/ChatWindow.cpp +++ b/src/ChatWindow.cpp @@ -40,8 +40,9 @@ namespace dchat stack.add(roomSettingsWindow, "settings"); stack.add(roomNotificationsWindow, "notifications"); - Gtk::Paned *sidePanels = Gtk::manage(new Gtk::Paned(Gtk::ORIENTATION_HORIZONTAL)); + Gtk::ResponsivePaned *sidePanels = Gtk::manage(new Gtk::ResponsivePaned(Gtk::ORIENTATION_HORIZONTAL)); sidePanels->get_style_context()->add_class("side-panels"); + sidePanels->set_wide_handle(true); chatPage.attach(*sidePanels, 0, 1, 1, 2); setupLeftPanel(sidePanels); @@ -116,15 +117,15 @@ namespace dchat }); } - void ChatWindow::setupLeftPanel(Gtk::Paned *sidePanels) + void ChatWindow::setupLeftPanel(Gtk::ResponsivePaned *sidePanels) { Gtk::Grid *leftPanelLayout = Gtk::manage(new Gtk::Grid()); leftPanelLayout->set_vexpand(true); - leftPanelLayout->set_size_request(200); + leftPanelLayout->set_size_request(190); leftPanelLayout->get_style_context()->add_class("left-panel"); sidePanels->add1(*leftPanelLayout); - Gtk::Paned *leftPanel = Gtk::manage(new Gtk::Paned(Gtk::ORIENTATION_VERTICAL)); + Gtk::ResponsivePaned *leftPanel = Gtk::manage(new Gtk::ResponsivePaned(Gtk::ORIENTATION_VERTICAL)); leftPanel->set_vexpand(true); leftPanelLayout->attach(*leftPanel, 0, 0, 1, 2); @@ -141,11 +142,13 @@ namespace dchat channelsLayout->attach(*channelsTitle, 0, 0, 1, 1); Gtk::ScrolledWindow *channelsScrollWindow = Gtk::manage(new Gtk::ScrolledWindow()); + channelsScrollWindow->set_policy(Gtk::PolicyType::POLICY_NEVER, Gtk::PolicyType::POLICY_NEVER); channelsScrollWindow->set_vexpand(true); channelsScrollWindow->set_hexpand(true); channelsScrollWindow->set_overlay_scrolling(false); channelsLayout->attach_next_to(*channelsScrollWindow, *channelsTitle, Gtk::POS_BOTTOM, 1, 2); + leftPanelChannels.set_row_spacing(5); leftPanelChannels.set_vexpand(true); leftPanelChannels.set_hexpand(true); channelsScrollWindow->add(leftPanelChannels); @@ -228,14 +231,15 @@ namespace dchat messageArea.set_policy(Gtk::PolicyType::POLICY_NEVER, Gtk::PolicyType::POLICY_AUTOMATIC); rightPanel->attach(messageArea, 0, 0, 1, 2); - messageAreaStack.set_name("chat-area-layout"); + messageAreaStack.set_name("message-area-layout"); messageArea.add(messageAreaStack); } void ChatWindow::setupChatInput(Gtk::Grid *rightPanel) { Gtk::Grid *chatArea = Gtk::manage(new Gtk::Grid()); - rightPanel->attach_next_to(*chatArea, messageArea, Gtk::POS_BOTTOM, 1, 1); + chatArea->set_name("chat-area"); + rightPanel->attach(*chatArea, 0, 2, 1, 1); Gtk::ScrolledWindow *chatScrollWindow = Gtk::manage(new Gtk::ScrolledWindow()); chatScrollWindow->set_hexpand(true); @@ -353,12 +357,10 @@ namespace dchat messageAreaStack.add(*messageAreaLayout, roomIdStr); fprintf(stderr, "Added channel %s\n", room->id->toString().c_str()); - Gtk::ToggleButton *roomButton = new Gtk::ToggleButton("Room name"); - roomButton->set_active(true); + Gtk::RadioButton *roomButton = new Gtk::RadioButton("Room name"); + roomButton->property_draw_indicator().set_value(false); roomButton->get_style_context()->add_class("room-button"); roomButton->set_hexpand(true); - roomButton->set_halign(Gtk::ALIGN_START); - roomButton->get_child()->set_halign(Gtk::ALIGN_START); roomButton->show(); roomButton->signal_clicked().connect([this, room] { @@ -371,6 +373,7 @@ namespace dchat roomDataById[*room->id] = roomData; if(!currentRoom) { + roomButton->set_active(true); currentRoom = room; currentRoomData = roomData; if(room->localUser) @@ -480,8 +483,8 @@ namespace dchat void ChatWindow::changeRoomName(const RoomChangeNameRequest &request) { - Gtk::Button *button = roomDataById[*request.room->id]->button; - static_cast(button->get_child())->set_text(request.newName); + Gtk::RadioButton *button = roomDataById[*request.room->id]->button; + button->set_label(request.newName); if(*request.room->id == *currentRoom->id) topbar->setTitle(request.newName); fprintf(stderr, "Changed room %s name to %s\n", request.room->id->toString().c_str(), request.newName.c_str()); diff --git a/src/ResponsivePaned.cpp b/src/ResponsivePaned.cpp new file mode 100644 index 0000000..45991bc --- /dev/null +++ b/src/ResponsivePaned.cpp @@ -0,0 +1,36 @@ +#include "../include/ResponsivePaned.hpp" + +namespace Gtk +{ + ResponsivePaned::ResponsivePaned(Orientation orientation) : + Paned(orientation) + { + /* + signal_draw().connect_notify([this](const Cairo::RefPtr &context) + { + if(get_orientation() == Orientation::ORIENTATION_VERTICAL) + return; + + Widget *leftChild = get_child1(); + if(!leftChild) + return; + + int width = get_width(); + if(width > 720) + leftChild->show(); + else + leftChild->hide(); + }); + + signal_configure_event().connect_notify([this](GdkEventConfigure *event) + { + Widget *leftChild = get_child1(); + printf("width: %d\n", event->width); + if(get_orientation() == Orientation::ORIENTATION_VERTICAL) + return; + + return; + }, false); + */ + } +} \ No newline at end of file diff --git a/src/RoomSettingsWindow.cpp b/src/RoomSettingsWindow.cpp index e20e36e..8bc9329 100644 --- a/src/RoomSettingsWindow.cpp +++ b/src/RoomSettingsWindow.cpp @@ -16,6 +16,7 @@ namespace dchat sidePanels->get_style_context()->add_class("side-panels"); sidePanels->set_vexpand(true); sidePanels->set_hexpand(true); + sidePanels->set_wide_handle(true); attach(*sidePanels, 0, 0, 1, 1); setupLeftPanel(sidePanels); @@ -35,8 +36,8 @@ namespace dchat { Gtk::Grid *leftPanel = Gtk::manage(new Gtk::Grid()); leftPanel->set_vexpand(true); - leftPanel->set_valign(Gtk::ALIGN_START); - leftPanel->set_halign(Gtk::ALIGN_START); + //leftPanel->set_valign(Gtk::ALIGN_START); + //leftPanel->set_halign(Gtk::ALIGN_START); leftPanel->set_size_request(200); leftPanel->get_style_context()->add_class("left-panel"); sidePanels->add1(*leftPanel); diff --git a/src/Window.cpp b/src/Window.cpp index adad21e..b3c8dcc 100644 --- a/src/Window.cpp +++ b/src/Window.cpp @@ -166,7 +166,7 @@ namespace dchat } prevTimeMillis = std::chrono::duration_cast(std::chrono::system_clock::now().time_since_epoch()).count() - 5000; drawBackgroundConnection = signal_draw().connect(sigc::mem_fun(*this, &Window::drawBackground)); - set_size_request(640, 480); + //set_size_request(640, 480); //set_app_paintable(true); } diff --git a/src/main.cpp b/src/main.cpp index 71e54d3..f6b2ae6 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -2,12 +2,16 @@ #include #include #include +#ifndef NDEBUG +#include +#endif -int main (int argc, char *argv[]) +static int setWindowCss(dchat::Window &window, Glib::RefPtr css) { - auto app = Gtk::Application::create(argc, argv, "dec05eba.dchat"); + auto ctx = window.get_style_context(); + auto screen = Gdk::Screen::get_default(); + ctx->remove_provider_for_screen(screen, css); - auto css = Gtk::CssProvider::create(); try { if(!css->load_from_path("css/style.css")) @@ -22,10 +26,27 @@ int main (int argc, char *argv[]) return 1; } - dchat::Window window; - auto ctx = window.get_style_context(); - auto screen = Gdk::Screen::get_default(); ctx->add_provider_for_screen(screen, css, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION); + return 0; +} + +int main (int argc, char *argv[]) +{ + auto app = Gtk::Application::create(argc, argv, "dec05eba.dchat"); + auto css = Gtk::CssProvider::create(); + dchat::Window window; + if(setWindowCss(window, css) != 0) + return 1; + +#ifndef NDEBUG + auto cssFile = Gio::File::create_for_path("css/style.css"); + auto cssFileMonitor = cssFile->monitor_file(); + cssFileMonitor->signal_changed().connect([&window, css](const Glib::RefPtr &file, const Glib::RefPtr &otherFile, Gio::FileMonitorEvent event) + { + fprintf(stderr, "Css file modified, reloading\n"); + setWindowCss(window, css); + }); +#endif return app->run(window); } -- cgit v1.2.3