more styling

misc/style.cpp

@@ -27,28 +27,29 @@
 // helper functions
 QFont appFont(int pixelSize, int weight)
 {
-    auto font = QFont();
+    QFont font;
     font.setPixelSize(pixelSize);
     font.setWeight(weight);
     return font;
 }
 
-QString cssifyWeight(int weight)
+QString qssifyWeight(int weight)
 {
     QString weightStr = "normal";
     if (weight == QFont::Bold)
         weightStr = "bold";
     if (weight == QFont::Light)
-        weightStr = "lighter";
+        weightStr = "light";
 
     return QString("%1").arg(weightStr);
 }
 
-QString cssifyFont(QFont font)
+QString qssifyFont(QFont font)
 {
-    return QString("%1px %2")
+    return QString("%1px %2 \"%3\"")
             .arg(font.pixelSize())
-            .arg(font.weight());
+            .arg(qssifyWeight(font.weight()))
+            .arg(font.family());
 }
 
 QString Style::getStylesheet(const QString &filename)
@@ -112,13 +113,13 @@ QString Style::resolve(QString qss)
         {"@white", getColor(White).name()},
 
         // fonts
-        {"@extraBig", cssifyFont(getFont(ExtraBig))},
+        {"@extraBig", qssifyFont(getFont(ExtraBig))},
-        {"@big", cssifyFont(getFont(Big))},
+        {"@big", qssifyFont(getFont(Big))},
-        {"@bigBold", cssifyFont(getFont(BigBold))},
+        {"@bigBold", qssifyFont(getFont(BigBold))},
-        {"@medium", cssifyFont(getFont(Medium))},
+        {"@medium", qssifyFont(getFont(Medium))},
-        {"@mediumBold", cssifyFont(getFont(MediumBold))},
+        {"@mediumBold", qssifyFont(getFont(MediumBold))},
-        {"@small", cssifyFont(getFont(Small))},
+        {"@small", qssifyFont(getFont(Small))},
-        {"@smallLight", cssifyFont(getFont(SmallLight))},
+        {"@smallLight", qssifyFont(getFont(SmallLight))},
     };
 
     for (const QString& key : dict.keys())

ui/chatArea/innerStyle.css

@@ -1,25 +1,31 @@
-div.name_me {
-  color: #646464;
-  font-weight: bold;
-  padding-right: 3px;
-}
-
 div.name {
-  color: #000000;
+  color: @black;
-  font-weight: bold;
+  font: @big;
-  padding-right: 3px;
 }
 
 div.message {
-  color: #000000;
+  color: @black;
-  padding-right: 3px;
+  font: @big;
-  padding-left: 3px;
 }
 
 div.date {
-  color: #000000;
+  color: @black;
-  padding-left: 3px;
+  font: @big;
-  white-space: nowrap;
+}
+
+div.name_me {
+  color: @mediumGrey;
+  font: @big;
+}
+
+div.message_me {
+  color: @mediumGrey;
+  font: @big;
+}
+
+div.date_me {
+  color: @mediumGrey;
+  font: @big;
 }
 
 span.quote {
@@ -31,9 +37,9 @@ div.green {
   margin-bottom: 12px;
   margin-left: 12px;
   margin-right: 12px;
-  color: #ffffff;
+  color: @white;
-  background-color: #6bc260;
+  background-color: @green;
-  font-size: 10px;
+  font: @small;
 }
 
 div.silver {
@@ -41,9 +47,9 @@ div.silver {
   margin-bottom: 12px;
   margin-left: 12px;
   margin-right: 12px;
-  color: #000000;
+  color: @black;
-  background-color: #d1d1d1;
+  background-color: @lightGrey;
-  font-size: 10px;
+  font: @small;
 }
 
 div.red {
@@ -51,14 +57,14 @@ div.red {
   margin-bottom: 12px;
   margin-left: 12px;
   margin-right: 12px;
-  color: #ffffff;
+  color: @white;
-  background-color: rgb(200,78,78);
+  background-color: @red;
-  font-size: 10px;
+  font: @small;
 }
 
 div.button {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
-  color: #ffffff;
+  color: @white;
 }

ui/chatroomWidgets/genericChatroomWidget.css

@@ -0,0 +1,38 @@
+GenericChatroomWidget 
+{ 
+  background-color: @mediumGrey;
+}
+
+GenericChatroomWidget[active="true"]
+{
+  background-color: @white;
+}
+
+GenericChatroomWidget[active="false"]:hover 
+{ 
+  background-color: @mediumGreyLight; 
+} 
+
+GenericChatroomWidget[active="true"] > QLabel#status 
+{
+  font: @medium;
+  color: @mediumGrey;
+}
+
+GenericChatroomWidget[active="false"] > QLabel#status 
+{
+  font: @medium;
+  color: @lightGrey;
+}
+
+GenericChatroomWidget[active="true"] > QLabel#name
+{
+  font: @big;
+  color: @darkGrey;
+}
+
+GenericChatroomWidget[active="false"] > QLabel#name
+{
+  font: @big;
+  color: @white;
+}

ui/emoticonWidget/emoticonWidget.css

@@ -35,6 +35,6 @@ QRadioButton::indicator::checked
 
 QMenu
 {
-     background-color: #414141; /* sets background of the menu */
+     background-color: @mediumGrey; /* sets background of the menu */
      border: 0px solid;
 }

ui/msgEdit/msgEdit.css

@@ -1,5 +1,5 @@
 QTextEdit {
-	border-color: #c4c1bd;
+	border-color: @lightGrey;
 	border-style: solid;
 	border-width: 1px 0 1px 1px;
 }

widget/chatareawidget.cpp

@@ -36,19 +36,20 @@ ChatAreaWidget::ChatAreaWidget(QWidget *parent) :
     setAcceptRichText(false);
     setFrameStyle(QFrame::NoFrame);
 
-    chatTextTable = textCursor().insertTable(1,3);
-
     QTextTableFormat tableFormat;
+    tableFormat.setCellSpacing(15);
     tableFormat.setBorderStyle(QTextFrameFormat::BorderStyle_None);
-    tableFormat.setCellSpacing(2);
+    tableFormat.setColumnWidthConstraints({QTextLength(QTextLength::VariableLength,0),
-    tableFormat.setWidth(QTextLength(QTextLength::PercentageLength,100));
+                                           QTextLength(QTextLength::PercentageLength,100),
-    chatTextTable->setFormat(tableFormat);
+                                           QTextLength(QTextLength::VariableLength,0)});
-    setNameColWidth(100);
+
+    chatTextTable = textCursor().insertTable(1,3,tableFormat);
+
+    nameFormat.setAlignment(Qt::AlignRight);
+    nameFormat.setNonBreakableLines(true);
+    dateFormat.setAlignment(Qt::AlignLeft);
+    dateFormat.setNonBreakableLines(true);
 
-//    nameFormat.setAlignment(Qt::AlignRight);
-//    nameFormat.setNonBreakableLines(true);
-//    dateFormat.setAlignment(Qt::AlignLeft);
-//    dateFormat.setNonBreakableLines(true);
 
     connect(this, &ChatAreaWidget::anchorClicked, this, &ChatAreaWidget::onAnchorClicked);
     connect(verticalScrollBar(), SIGNAL(rangeChanged(int,int)), this, SLOT(onSliderRangeChanged()));
@@ -112,9 +113,11 @@ void ChatAreaWidget::insertMessage(ChatAction *msgAction)
     cur.clearSelection();
     cur.setKeepPositionOnInsert(true);
     chatTextTable->appendRows(1);
+    chatTextTable->cellAt(row,0).firstCursorPosition().setBlockFormat(nameFormat);
     chatTextTable->cellAt(row,0).firstCursorPosition().insertHtml(msgAction->getName());
     chatTextTable->cellAt(row,1).firstCursorPosition().insertHtml(msgAction->getMessage());
-    chatTextTable->cellAt(row,2).firstCursorPosition().insertText(msgAction->getDate());
+    chatTextTable->cellAt(row,2).firstCursorPosition().setBlockFormat(dateFormat);
+    chatTextTable->cellAt(row,2).firstCursorPosition().insertHtml(msgAction->getDate());
 
     msgAction->setup(cur, this);
 

widget/form/chatform.cpp

@@ -35,7 +35,7 @@
 #include "widget/widget.h"
 #include "widget/maskablepixmapwidget.h"
 #include "widget/croppinglabel.h"
-#include "style.h"
+#include "misc/style.h"
 
 ChatForm::ChatForm(Friend* chatFriend)
     : f(chatFriend)

widget/form/groupchatform.cpp

@@ -21,7 +21,7 @@
 #include "widget/croppinglabel.h"
 #include "widget/maskablepixmapwidget.h"
 #include "core.h"
-#include "style.h"
+#include "misc/style.h"
 #include <QPushButton>
 #include <QMimeData>
 #include <QDragEnterEvent>

widget/friendwidget.cpp

@@ -24,7 +24,7 @@
 #include "widget/form/chatform.h"
 #include "widget/maskablepixmapwidget.h"
 #include "widget/croppinglabel.h"
-#include "style.h"
+#include "misc/style.h"
 #include <QContextMenuEvent>
 #include <QMenu>
 #include <QDrag>

widget/genericchatroomwidget.cpp

@@ -15,7 +15,7 @@
 */
 
 #include "genericchatroomwidget.h"
-#include "style.h"
+#include "misc/style.h"
 #include "widget/maskablepixmapwidget.h"
 #include "croppinglabel.h"
 #include <QMouseEvent>

widget/groupwidget.cpp

@@ -20,7 +20,7 @@
 #include "misc/settings.h"
 #include "widget/form/groupchatform.h"
 #include "widget/maskablepixmapwidget.h"
-#include "style.h"
+#include "misc/style.h"
 #include <QPalette>
 #include <QMenu>
 #include <QContextMenuEvent>

widget/tool/chatactions/chataction.cpp

@@ -41,13 +41,15 @@ QString ChatAction::QImage2base64(const QImage &img)
 QString ChatAction::getName()
 {
     if (isMe)
-        return QString("<div class=name_me>" + toHtmlChars(name) + "</div>");
+        return QString("<div class=%1>%2</div>").arg("name_me").arg(toHtmlChars(name));
     else
-        return QString("<div class=name>" + toHtmlChars(name) + "</div>");
+        return QString("<div class=%1>%2</div>").arg("name").arg(toHtmlChars(name));
 }
 
 QString ChatAction::getDate()
 {
-    QString res = date;
+    if (isMe)
-    return res;
+        return QString("<div class=date_me>" + toHtmlChars(date) + "</div>");
+    else
+        return QString("<div class=date>" + toHtmlChars(date) + "</div>");
 }

widget/tool/chatactions/messageaction.cpp

@@ -71,5 +71,8 @@ QString MessageAction::getMessage()
     }
     message_ = message_.left(message_.length()-4);
 
+    if (isMe)
+        return QString("<div class=message_me>" + message_ + "</div>");
+    else
         return QString("<div class=message>" + message_ + "</div>");
 }