refactor(css): Move all chatFormHead related css in one file

res.qrc

@@ -44,8 +44,6 @@
         <file>img/taskbar/light/taskbar_event.svg</file>
         <file>img/transfer.svg</file>
         <file>ui/fileTransferWidget/fileDone.svg</file>
-        <file>ui/callButton/callButton.css</file>
-        <file>ui/callButton/callButton.svg</file>
         <file>ui/chatArea/chatArea.css</file>
         <file>ui/chatArea/chatHead.css</file>
         <file>ui/chatArea/innerStyle.css</file>
@@ -53,6 +51,11 @@
         <file>ui/chatArea/scrollBarDownArrow.svg</file>
         <file>ui/chatArea/scrollBarLeftArrow.svg</file>
         <file>ui/chatArea/scrollBarRightArrow.svg</file>
+        <file>ui/chatFormHeader/buttons.css</file>
+        <file>ui/chatFormHeader/callButton.svg</file>
+        <file>ui/chatFormHeader/micButton.svg</file>
+        <file>ui/chatFormHeader/videoButton.svg</file>
+        <file>ui/chatFormHeader/volButton.svg</file>
         <file>ui/emoteButton/emoteButton.css</file>
         <file>ui/emoteButton/emoteButton.svg</file>
         <file>ui/emoticonWidget/dot_page.svg</file>
@@ -65,8 +68,6 @@
         <file>ui/screenshotButton/screenshotButton.svg</file>
         <file>ui/fileTransferWidget/fileTransferWidget.css</file>
         <file>ui/friendList/friendList.css</file>
-        <file>ui/micButton/micButton.css</file>
-        <file>ui/micButton/micButton.svg</file>
         <file>ui/msgEdit/msgEdit.css</file>
         <file>ui/sendButton/sendButton.css</file>
         <file>ui/sendButton/sendButton.svg</file>
@@ -74,10 +75,6 @@
         <file>ui/settings/mainHead.css</file>
         <file>ui/statusButton/statusButton.css</file>
         <file>ui/statusButton/menu_indicator.svg</file>
-        <file>ui/videoButton/videoButton.css</file>
-        <file>ui/videoButton/videoButton.svg</file>
-        <file>ui/volButton/volButton.css</file>
-        <file>ui/volButton/volButton.svg</file>
         <file>ui/window/general.css</file>
         <file>ui/window/statusPanel.css</file>
         <file>ui/window/window.css</file>

ui/callButton/callButton.css

@@ -1,63 +0,0 @@
-QAbstractButton
-{
-    border-radius: 5px;
-    border: none;
-    background-image: url(":/ui/callButton/callButton.svg");
-    background-repeat: none;
-    background-position: center;
-}
-
-QAbstractButton:disabled
-{
-    background-color: #919191;
-}
-
-QAbstractButton:focus
-{
-    outline: none;
-}
-
-QAbstractButton#green
-{
-    background-color: #6bc260;
-}
-
-QAbstractButton#green:hover
-{
-    background-color: #79c76f;
-}
-
-QAbstractButton#green:pressed
-{
-    background-color: #51b244;
-}
-
-QAbstractButton#red
-{
-    background-color: #c84e4e;
-}
-
-QAbstractButton#red:hover
-{
-    background-color: #e87474;
-}
-
-QAbstractButton#red:pressed
-{
-    background-color: #df3b3b;
-}
-
-QAbstractButton#yellow
-{
-    background-color: #e6e465;
-}
-
-QAbstractButton#yellow:hover
-{
-    background-color: #e8e774;
-}
-
-QAbstractButton#yellow:pressed
-{
-    background-color: #e3e155;
-}

ui/chatFormHeader/buttons.css

@@ -0,0 +1,82 @@
+QAbstractButton#volButton
+{
+    image: url(":/ui/chatFormHeader/volButton.svg");
+}
+
+QAbstractButton#micButton
+{
+    image: url(":/ui/chatFormHeader/micButton.svg");
+}
+
+QAbstractButton#videoButton
+{
+    background-image: url(":/ui/chatFormHeader/videoButton.svg");
+}
+
+QAbstractButton#callButton
+{
+    background-image: url(":/ui/chatFormHeader/callButton.svg");
+}
+
+QAbstractButton
+{
+    background-repeat: none;
+    background-position: center;
+    border: none;
+    border-radius: 5px;
+}
+
+QAbstractButton:disabled
+{
+    background-color: #919191;
+}
+
+QAbstractButton:focus
+{
+    outline: none;
+}
+
+QAbstractButton[state="green"]
+{
+    background-color: #6bc260;
+}
+
+QAbstractButton[state="green"]:hover
+{
+    background-color: #79c76f;
+}
+
+QAbstractButton[state="green"]:pressed
+{
+    background-color: #51b244;
+}
+
+QAbstractButton[state="red"]
+{
+    background-color: #c84e4e;
+}
+
+QAbstractButton[state="red"]:hover
+{
+    background-color: #e87474;
+}
+
+QAbstractButton[state="red"]:pressed
+{
+    background-color: #df3b3b;
+}
+
+QAbstractButton[state="yellow"]
+{
+    background-color: #e6e465;
+}
+
+QAbstractButton[state="yellow"]:hover
+{
+    background-color: #e8e774;
+}
+
+QAbstractButton[state="yellow"]:pressed
+{
+    background-color: #e3e155;
+}

ui/micButton/micButton.css

@@ -1,67 +0,0 @@
-QToolButton
-{
-    image: url(":/ui/micButton/micButton.svg");
-}
-
-QAbstractButton
-{
-    border-radius: 5px;
-    border: none;
-    background-repeat: none;
-    background-position: center;
-}
-
-QAbstractButton:disabled
-{
-    background-color: #919191;
-}
-
-QAbstractButton:focus
-{
-    outline: none;
-}
-
-QAbstractButton#green
-{
-    background-color: #6bc260;
-}
-
-QAbstractButton#green:hover
-{
-    background-color: #79c76f;
-}
-
-QAbstractButton#green:pressed
-{
-    background-color: #51b244;
-}
-
-QAbstractButton#red
-{
-    background-color: #c84e4e;
-}
-
-QAbstractButton#red:hover
-{
-    background-color: #e87474;
-}
-
-QAbstractButton#red:pressed
-{
-    background-color: #df3b3b;
-}
-
-QAbstractButton#yellow
-{
-    background-color: #e6e465;
-}
-
-QAbstractButton#yellow:hover
-{
-    background-color: #e8e774;
-}
-
-QAbstractButton#yellow:pressed
-{
-    background-color: #e3e155;
-}

ui/videoButton/videoButton.css

@@ -1,63 +0,0 @@
-QAbstractButton
-{
-    background-image: url(":/ui/videoButton/videoButton.svg");
-    background-repeat: none;
-    background-position: center;
-    border: none;
-    border-radius: 5px;
-}
-
-QAbstractButton:disabled
-{
-    background-color: #919191;
-}
-
-QAbstractButton:focus
-{
-    outline: none;
-}
-
-QAbstractButton#green
-{
-    background-color: #6bc260;
-}
-
-QAbstractButton#green:hover
-{
-    background-color: #79c76f;
-}
-
-QAbstractButton#green:pressed
-{
-    background-color: #51b244;
-}
-
-QAbstractButton#red
-{
-    background-color: #c84e4e;
-}
-
-QAbstractButton#red:hover
-{
-    background-color: #e87474;
-}
-
-QAbstractButton#red:pressed
-{
-    background-color: #df3b3b;
-}
-
-QAbstractButton#yellow
-{
-    background-color: #e6e465;
-}
-
-QAbstractButton#yellow:hover
-{
-    background-color: #e8e774;
-}
-
-QAbstractButton#yellow:pressed
-{
-    background-color: #e3e155;
-}

ui/volButton/volButton.css

@@ -1,67 +0,0 @@
-QToolButton
-{
-    image: url(":/ui/volButton/volButton.svg");
-}
-
-QAbstractButton
-{
-    border-radius: 5px;
-    border: none;
-    background-repeat: none;
-    background-position: center;
-}
-
-QAbstractButton:disabled
-{
-    background-color: #919191;
-}
-
-QAbstractButton:focus
-{
-    outline: none;
-}
-
-QAbstractButton#green
-{
-    background-color: #6bc260;
-}
-
-QAbstractButton#green:hover
-{
-    background-color: #79c76f;
-}
-
-QAbstractButton#green:pressed
-{
-    background-color: #51b244;
-}
-
-QAbstractButton#red
-{
-    background-color: #c84e4e;
-}
-
-QAbstractButton#red:hover
-{
-    background-color: #e87474;
-}
-
-QAbstractButton#red:pressed
-{
-    background-color: #df3b3b;
-}
-
-QAbstractButton#yellow
-{
-    background-color: #e6e465;
-}
-
-QAbstractButton#yellow:hover
-{
-    background-color: #e8e774;
-}
-
-QAbstractButton#yellow:pressed
-{
-    background-color: #e3e155;
-}