Updated style and added some smileys

docroot/style.css

@@ -5,20 +5,29 @@ html, body {
     height: 100%;
 }
 .header {
-    background: #7BBE55;
+    background: #ffffff;
-    color: #7E471B;
+    color: #005100;
+}
+h1 {
+    padding: 0 0.5em;
+    margin: 0;
 }
 .menu {
-    background-color: #F9A22C;
+    background-color: #2E7D32;
-    height: 2em;
+    height: 2.3em;
-    color: #7E471B;
+}
+.menu > button {
+  background-color: #429043;
+  color: #ffffff;
+  height: 2em;
+  margin: 0.2em 0.4em;
 }
 .horizontal-box {
     height: calc(100% - 6em);
 }
 .userlist {
     background-color: lightgray;
-    width: 20em;
+    width: 15em;
 }
 .content {
     background-color: white;
@@ -30,21 +39,22 @@ html, body {
     width: 100%;
 }
 .userlist-gender-M {
-    background-color: #5078CD;
+    background-color: #0066CC;
     color: white;
 }
 .userlist-gender-F {
-    background-color: #aB00aB;
+    background-color: #FF4081;
     color: white;
 }
 .userlist-gender-P {
-    background-color: #ffffff;
+    background-color: #FFC107;
 }
 .userlist-gender-TM {
-    background-color: #ADD8E6
+    background-color: #90caf9;
 }
 .userlist-gender-TF {
-    background-color: #dB90aB;
+    background-color: #8E24AA;
+    color: #ffffff;
 }
 .inline-block {
     display: inline-block;
@@ -80,7 +90,7 @@ height: 31px;
     display: flex;
     flex-direction: row;
     max-width: 200px;
-    bottom: 73px;
+    bottom: 89px;
     position: absolute;
     font-size: 24pt;
     right: 3px;

src/app.cpp

@@ -275,7 +275,8 @@ void App::updateUserlist(Wt::Json::Array unsortedUserList) {
     auto layout = userListContainer_->setLayout(std::make_unique<Wt::WVBoxLayout>());
     layout->setSpacing(1);
     layout->setContentsMargins(0, 0, 0, 0);
-    userListContainer_->setOverflow(Wt::Overflow::Auto);
+    userListContainer_->setOverflow(Wt::Overflow::Auto, Wt::Orientation::Vertical);
+    userListContainer_->setOverflow(Wt::Overflow::Hidden, Wt::Orientation::Horizontal);
     auto sortedUserList = sortUserList(unsortedUserList);
     for (Wt::Json::Object &user: sortedUserList) {
         addUserItemToLayout(layout, user);
@@ -383,6 +384,7 @@ Wt::WContainerWidget* App::createInputContainer(Wt::WVBoxLayout* layout) {
     auto inputContainer = layout->addNew<Wt::WContainerWidget>();
     auto inputLayout = inputContainer->setLayout(std::make_unique<Wt::WHBoxLayout>());
     auto inputLine = createInputLine(inputLayout);
+    inputLine->setFocus();
     createSendImageButton(inputLayout);
     auto cursorPosition = std::make_shared<int>(0);
     createSmileyButton(inputLayout, inputLine, cursorPosition);
@@ -495,6 +497,7 @@ Wt::WPushButton* App::createSendButton(Wt::WHBoxLayout* inputLayout, Wt::WLineEd
     };
     inputLine->enterPressed().connect(sendMessageFunction);
     sendButton->clicked().connect(sendMessageFunction);
+    inputLine->setFocus();
     return sendButton;
 }
 
@@ -524,8 +527,8 @@ void App::updateOutputContainer(Wt::Json::Object conversation) {
     auto outputLayoutItem = containerLayout->itemAt(1);
     auto outputContainer = (Wt::WContainerWidget*)outputLayoutItem->widget();
     outputContainer->clear();
-    renderChatLines(conversation, outputContainer);
     outputContainer->setOverflow(Wt::Overflow::Auto);
+    renderChatLines(conversation, outputContainer);
 }
 
 void App::renderChatLines(Wt::Json::Object conversation, Wt::WContainerWidget* outputContainer) {
@@ -564,8 +567,8 @@ void App::createImprintContainer(Wt::WVBoxLayout *containerLayout) {
     imprintContainer->setPadding(Wt::WLength(0.5, Wt::LengthUnit::FontEm));
     auto imprintButton = imprintContainer->addNew<Wt::WText>("Imprint");
     Wt::WCssDecorationStyle imprintButtonDecorationStyle;
-    imprintButtonDecorationStyle.setForegroundColor(Wt::WColor(126, 71, 27));
+    imprintButtonDecorationStyle.setForegroundColor(Wt::StandardColor::White);
-    imprintButtonDecorationStyle.setBackgroundColor(Wt::WColor(249, 162, 44));
+    imprintButtonDecorationStyle.setBackgroundColor(Wt::WColor(0x42, 0x90, 0x43));
     imprintButtonDecorationStyle.setCursor(Wt::Cursor::PointingHand);
     imprintContainer->setDecorationStyle(imprintButtonDecorationStyle);
     imprintButton->clicked().connect([=, this]() {
@@ -718,6 +721,7 @@ std::unique_ptr<Wt::WContainerWidget> App::createSmileysBar(Wt::WLineEdit *input
         auto code = smileyPlaceholder_;
         code = code.arg(smiley.second.code);
         auto item = smileyBar->addNew<Wt::WText>(code, Wt::TextFormat::UnsafeXHTML);
+        item->setToolTip(smiley.second.tooltip);
         item->clicked().connect([=]() {
             auto currentText = inputLine->text().toUTF8();
             currentText.insert(*cursorPosition, smiley.first);
@@ -1163,7 +1167,7 @@ Class *App::addSearchItemLine(Wt::WVBoxLayout *layout, std::string label, std::u
     auto lineLayout = lineContainer->setLayout(std::make_unique<Wt::WHBoxLayout>());
     lineContainer->setPadding(Wt::WLength("0"));
     lineContainer->setMargin(Wt::WLength("0"));
-    lineLayout->addNew<Wt::WText>(label);
+    lineLayout->addNew<Wt::WText>(label)->setWidth(Wt::WLength(9, Wt::LengthUnit::FontEm));
     lineLayout->setContentsMargins(0, 0, 0, 0);
     lineLayout->setSpacing(0);
     auto input = std::make_unique<Class>();

src/app.h

@@ -46,6 +46,17 @@ private:
         {":p", Smiley("1F60B", "Tongue")},
         {";p", Smiley("1F61C", "Twinkle tongue")},
         {"O)", Smiley("1F607", "Angel")},
+        {":*", Smiley("1F617", "Kiss")},
+        {"<3", Smiley("1FA77", "Heart")},
+        {"xD", Smiley("1F602", "Laughing hard")},
+        {":@", Smiley("1F635", "Confused")},
+        {":O", Smiley("1F632", "Surprised")},
+        {":3", Smiley("1F63A", "Cat face")},
+        {":|", Smiley("1F610", "Neutral")},
+        {":/", Smiley("1FAE4", "Skeptical")},
+        {":#", Smiley("1F912", "Sick")},
+        {"#)", Smiley("1F973", "Partied")},
+        {"%)", Smiley("1F974", "Drunk")},
         {":'(", Smiley("1F622", "Cry")}
     };
     struct Search {