Auto reload css on modify, improve design

10 files changed, 184 insertions, 55 deletions

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 <dchat/Room.hpp>
 #include <gtkmm/label.h>
-#include <gtkmm/togglebutton.h>
+#include <gtkmm/radiobutton.h>
 #include <gtkmm/grid.h>
 #include <gtkmm/entry.h>
-#include <gtkmm/paned.h>
+#include "ResponsivePaned.hpp"
 #include <gtkmm/scrolledwindow.h>
 #include <gtkmm/stack.h>
 #include <gtkmm/textview.h>
@@ -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<RoomData*> 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 <gtkmm/paned.h>
+
+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<Gtk::Label*>(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<Cairo::Context> &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::milliseconds>(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 <gtkmm/application.h>
 #include <gtkmm/cssprovider.h>
 #include <gtkmm/settings.h>
+#ifndef NDEBUG
+#include <giomm.h>
+#endif
 
-int main (int argc, char *argv[])
+static int setWindowCss(dchat::Window &window, Glib::RefPtr<Gtk::CssProvider> 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<Gio::File> &file, const Glib::RefPtr<Gio::File> &otherFile, Gio::FileMonitorEvent event)
+    {
+        fprintf(stderr, "Css file modified, reloading\n");
+        setWindowCss(window, css);
+    });
+#endif
 
     return app->run(window);
 }