Change fashion-mode background-color to border-image

dde-dock/Resources/images/dark_dock.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="93px" height="50px" viewBox="0 0 93 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>dark_dock</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#000000" stop-opacity="0.498245018" offset="0%"></stop>
+            <stop stop-color="#000000" stop-opacity="0.802026721" offset="91.410236%"></stop>
+            <stop stop-color="#1E1E1E" stop-opacity="0.877240115" offset="92.1134107%"></stop>
+            <stop stop-color="#343434" stop-opacity="0.9" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFFFF" stop-opacity="0.05" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.1" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="-375.962707%" fx="50%" fy="-375.962707%" r="50%" id="radialGradient-3">
+            <stop stop-color="#FFFFFF" stop-opacity="0.25" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.2" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="dark_dock" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)">
+            <path d="M0.704924594,43.6343891 C0.279936283,46.0454494 1.62330451,48 3.70079437,48 L87.5507183,48 C89.6299951,48 90.9720567,46.0439005 90.5482688,43.6343891 L83.5427251,4.3656109 C83.1065196,1.95455058 81.0957754,0 79.0561566,0 L12.2138355,0 C10.1724624,0 8.16243898,1.95609953 7.72558634,4.3656109 L0.704924594,43.6343891 Z" id="Mask" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"></path>
+            <path d="M1.50236742,43.5 L89.5023674,43.5" id="Line" stroke="url(#radialGradient-3)" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

dde-dock/Resources/qss/default.qss

@@ -1,7 +1,13 @@
-QLabel#Panel {
+QLabel#Panel[isFashionMode="false"] {
     background-color: rgba(0,0,0,0.7);
 }
 
+QLabel#Panel[isFashionMode="true"] {
+    border-width: 0px 21px 50px 21px;
+    border-image: url(://Resources/images/dark_dock.svg)  0 21 50 21 stretch;
+
+}
+
 QLabel#AppBackground[isCurrentOpened="true"][isHovered="true"] {/*item is current opened and is hovered*/
     background: rgba(0,188,255,0.80);
     border: 1px solid rgba(79,174,249,0.50);

dde-dock/images.qrc

@@ -3,5 +3,6 @@
         <file>Resources/images/close_hover.png</file>
         <file>Resources/images/close_press.png</file>
         <file>Resources/images/close_normal.png</file>
+        <file>Resources/images/dark_dock.svg</file>
     </qresource>
 </RCC>

dde-dock/src/Panel/panel.cpp

@@ -49,6 +49,8 @@ Panel::Panel(QWidget *parent)
     QTimer::singleShot(10, [=](){
         reanchorsLayout(dockCons->getDockMode());
     });
+
+    updateBackground();
 }
 
 void Panel::showScreenMask()
@@ -60,6 +62,11 @@ void Panel::showScreenMask()
     connect(maskWidget,SIGNAL(itemExited()),this,SLOT(slotExitedMask()));
 }
 
+bool Panel::isFashionMode()
+{
+    return m_isFashionMode;
+}
+
 void Panel::hideScreenMask()
 {
 //    qWarning() << "[Info:]" << "Hide Screen Mask.";
@@ -94,6 +101,8 @@ void Panel::slotExitedMask()
 
 void Panel::changeDockMode(Dock::DockMode newMode, Dock::DockMode oldMode)
 {
+    updateBackground();
+
     leftLayout->relayout();
     rightLayout->relayout();
 
@@ -144,9 +153,14 @@ void Panel::reanchorsLayout(Dock::DockMode mode)
         leftLayout->resize(leftLayout->getContentsWidth() + dockCons->getAppItemSpacing(),dockCons->getItemHeight());
         rightLayout->setSortDirection(DockLayout::LeftToRight);
         rightLayout->resize(rightLayout->getContentsWidth(),dockCons->getItemHeight());
-        rightLayout->move(leftLayout->width() - dockCons->getAppItemSpacing(),1);
+        this->setFixedSize(FASHION_PANEL_LPADDING
+                           + FASHION_PANEL_RPADDING
+                           + leftLayout->getContentsWidth()
+                           + rightLayout->getContentsWidth()
+                           ,dockCons->getDockHeight());
+        leftLayout->move(FASHION_PANEL_LPADDING,1);
 
-        this->setFixedSize(leftLayout->getContentsWidth() + rightLayout->getContentsWidth(),dockCons->getDockHeight());
+        rightLayout->move(leftLayout->x() + leftLayout->width() - dockCons->getAppItemSpacing(),1);
         this->move((parentWidget->width() - width()) / 2,0);
     }
     else
@@ -155,6 +169,7 @@ void Panel::reanchorsLayout(Dock::DockMode mode)
         rightLayout->resize(rightLayout->getContentsWidth(),dockCons->getItemHeight());
         rightLayout->move(parentWidget->width() - rightLayout->width(),1);
 
+        leftLayout->move(0,1);
         leftLayout->resize(parentWidget->width() - rightLayout->width() ,dockCons->getItemHeight());
 
         this->setFixedSize(leftLayout->width() + rightLayout->width(),dockCons->getDockHeight());
@@ -169,6 +184,14 @@ void Panel::showMenu()
     PanelMenu::instance()->showMenu(tmpPos.x(),tmpPos.y());
 }
 
+void Panel::updateBackground()
+{
+    m_isFashionMode = dockCons->getDockMode() == Dock::FashionMode;
+
+    style()->unpolish(this);
+    style()->polish(this);// force a stylesheet recomputation
+}
+
 void Panel::initAppManager()
 {
     m_appManager = new AppManager(this);

dde-dock/src/Panel/panel.h

@@ -18,6 +18,7 @@ class Panel : public QLabel
 {
     Q_OBJECT
     Q_PROPERTY(QPoint pos READ pos WRITE move)
+    Q_PROPERTY(bool isFashionMode READ isFashionMode)
 
 public:
     explicit Panel(QWidget *parent = 0);
@@ -26,6 +27,8 @@ public:
     void showScreenMask();
     void hideScreenMask();
 
+    bool isFashionMode();
+
 public slots:
     void slotDragStarted();
     void slotItemDropped();
@@ -53,6 +56,8 @@ private:
 
     void showMenu();
 
+    void updateBackground();
+
     void initAppManager();
 
     void hasShown();
@@ -60,6 +65,7 @@ private:
     void hideStateChanged(int value);
     void initHSManager();
     void initState();
+
 private:
     DBusHideStateManager * m_HSManager = NULL;
     DockLayout * leftLayout = NULL;
@@ -68,6 +74,10 @@ private:
     QWidget * parentWidget = NULL;
     ScreenMask * maskWidget = NULL;
     DockModeData *dockCons = DockModeData::instance();
+
+    bool m_isFashionMode = false;
+    const int FASHION_PANEL_LPADDING = 21;
+    const int FASHION_PANEL_RPADDING = 21;
 };
 
 #endif // PANEL_H