Merge lp:~ralsina/ubuntuone-control-panel/tweaks into lp:ubuntuone-control-panel

[Roberto Alsina]

- Added several tweaks to the UI stylesheet to avoid 'movements' when focusing a button, and to remove the ugly border from the twitter and facebook buttons.

Here are the changes with before/after images

* Remove borders from non-focused twitter/facebook buttons

Before: http://ubuntuone.com/0GlwHiflybykoUHZHZ8Gqw
After: http://ubuntuone.com/26uaOMSFZyxU0eiR4axh7T

* Change in the no-orange-overlay hack from 20px to 100%

No visible change except on rare occasions where 20px made pieces of text hide

* Do the GotoWebButtons arrows using qss and not setIcon
* Make the GotoWebButtons not shift when focused

Before, the text and icon shifted when you focused the button.
Now, they don't. The padding is different, and is not consistent
between buttons so it needs tweaking, if we go this way.

Before/after: http://ubuntuone.com/60XK8tDRjGP6AkZtH3bArf

* Changed background color on folder list activated item

Before, you could not see focus halos on buttons and checkboxes because of color clash:

http://ubuntuone.com/75Btee7WZ52WgQCYWJtdV4

After:

http://ubuntuone.com/4UKzBrcunwQteDz53YVPJp

* Focus halo on QCheckboxes

Before: the checkbox contents shifted when focused
http://ubuntuone.com/4uVKYiXzISNvTNr7WOv0Sk

Now: no shifting

http://ubuntuone.com/0gT5oilxtJi9m5Ca7VoLTx

* Style fix for focused Checkbox in folder list

Before:
http://ubuntuone.com/0quTUFP95oeI0z8O53w487

After: Not terribly happy about it, really.
http://ubuntuone.com/5G1o70sxMv0moaUVjZhFNX

* Focus halo on QSpinBox

Before: http://ubuntuone.com/1GHBE7Les5VpMweDbnjfEi
After: http://ubuntuone.com/6zzB7ohnZpaHihuPVlLT0e

[lp:~ralsina/ubuntuone-control-panel/tweaks]

292. By Roberto Alsina on 2012-03-15

useless change

[Natalia Bidart (nataliabidart)]

===============================================================================
[FAIL]
Traceback (most recent call last):
  File "/home/nessita/canonical/controlpanel/review_tweaks/ubuntuone/controlpanel/gui/qt/tests/test_gotoweb.py", line 47, in test_layout_direction
    self.assertEqual(self.ui.layoutDirection(), gui.QtCore.Qt.RightToLeft)
  File "/usr/lib/python2.7/dist-packages/twisted/trial/unittest.py", line 270, in assertEqual
    % (msg, pformat(first), pformat(second)))
twisted.trial.unittest.FailTest: not equal:
a = 0
b = 1

ubuntuone.controlpanel.gui.qt.tests.test_gotoweb.GoToWebButtonTestCase.test_layout_direction
-------------------------------------------------------------------------------
Ran 861 tests in 7.354s

FAILED (skips=2, failures=1, successes=858)

review: Needs Fixing

[lp:~ralsina/ubuntuone-control-panel/tweaks]

293. By Roberto Alsina on 2012-03-15

test is no longer appropiate

[Eric Casteleijn (thisfred)]

Works for me

review: Approve

[Roberto Alsina (ralsina)]

oops, forgot to remove that test. Fixed now.

[dobey (dobey)]

review: Approve

[Natalia Bidart (nataliabidart)]

Question:

(09:39:18 AM) nessita: ralsina: having this:
(09:39:18 AM) nessita: /* Compensate for border so text doesn't move */
(09:39:18 AM) nessita: padding-left: 8px;
(09:39:18 AM) nessita: padding-right: 23px;
(09:39:18 AM) nessita: isn't that absolutely dependent of the font size? (ie how many pixels are needed so text do not move)

Need fixing:

* This is a screenshot of trunk, for the devices tab, when tabbing into the devices list you can tell which device is focused: http://ubuntuone.com/4dkwoumzqmtChYd6aZjkGy

* This is the same screenshot from this branch, and I can not tell which device is focused: http://ubuntuone.com/759m76t6EOb5sUYyHrgtrn

review: Needs Fixing

[lp:~ralsina/ubuntuone-control-panel/tweaks]

294. By Roberto Alsina on 2012-03-16

merged trunk

[Roberto Alsina (ralsina)]

restored the dotted highlight on the focused device list.

[lp:~ralsina/ubuntuone-control-panel/tweaks]

295. By Roberto Alsina on 2012-03-16

restore dotted box around devices

[Roberto Alsina (ralsina)]

> Question:
>
> (09:39:18 AM) nessita: ralsina: having this:
> (09:39:18 AM) nessita: /* Compensate for border so text doesn't move */
> (09:39:18 AM) nessita: padding-left: 8px;
> (09:39:18 AM) nessita: padding-right: 23px;
> (09:39:18 AM) nessita: isn't that absolutely dependent of the font size? (ie
> how many pixels are needed so text do not move)

No, it's dependent on border size, it only has to be 2px smaller on each direction than the unfocused state.

[Natalia Bidart (nataliabidart)]

Could you please fix:
Text conflict in ubuntuone/controlpanel/gui/qt/gotoweb.py
1 conflicts encountered.

[lp:~ralsina/ubuntuone-control-panel/tweaks]

296. By Roberto Alsina on 2012-03-20

merged trunk, resolved conflict

[Natalia Bidart (nataliabidart)]

Looks good!

review: Approve

=== modified file 'data/external_icon_orange.png'
 Binary files data/external_icon_orange.png	2011-07-10 21:35:02 +0000 and data/external_icon_orange.png	2012-03-20 13:12:17 +0000 differ
=== modified file 'data/external_icon_white.png'
 Binary files data/external_icon_white.png	2011-07-10 21:35:02 +0000 and data/external_icon_white.png	2012-03-20 13:12:17 +0000 differ
=== modified file 'data/qt/controlpanel.ui'
--- data/qt/controlpanel.ui	2012-03-19 15:50:31 +0000
+++ data/qt/controlpanel.ui	2012-03-20 13:12:17 +0000
@@ -287,6 +287,9 @@
         <property name="text">
          <string notr="true">Get help online</string>
         </property>
+        <property name="flat">
+         <bool>true</bool>
+        </property>
        </widget>
       </item>
       <item>
@@ -330,6 +333,9 @@
          <iconset resource="images.qrc">
           <normaloff>:/twitter.png</normaloff>:/twitter.png</iconset>
         </property>
+        <property name="flat">
+         <bool>true</bool>
+        </property>
        </widget>
       </item>
       <item>
@@ -353,6 +359,9 @@
          <iconset resource="images.qrc">
           <normaloff>:/facebook.png</normaloff>:/facebook.png</iconset>
         </property>
+        <property name="flat">
+         <bool>true</bool>
+        </property>
        </widget>
       </item>
      </layout>
 
=== modified file 'data/qt/folders.ui'
--- data/qt/folders.ui	2012-03-16 18:54:55 +0000
+++ data/qt/folders.ui	2012-03-20 13:12:17 +0000
@@ -35,7 +35,7 @@
       <item>
        <widget class="GoToWebButton" name="share_publish_button">
         <property name="sizePolicy">
-         <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
+         <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
@@ -43,6 +43,9 @@
         <property name="text">
          <string notr="true">Go to the web for public and private sharing options</string>
         </property>
+        <property name="flat">
+         <bool>true</bool>
+        </property>
        </widget>
       </item>
       <item>
 
=== modified file 'data/qt/ubuntuone.qss'
--- data/qt/ubuntuone.qss	2012-03-15 01:25:08 +0000
+++ data/qt/ubuntuone.qss	2012-03-20 13:12:17 +0000
@@ -86,8 +86,8 @@
     padding-left: 19px;
     padding-right: 19px;
     /* hack to make the mild-orange focused box dissapear */
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 100%;
+    padding-bottom: 100%;
     /* end of hack */
 }
 
@@ -157,6 +157,7 @@
 QPushButton#twitter_button,
 QPushButton#facebook_button {
     background: transparent;
+    border: none;
 }
 
 QPushButton#twitter_button:focus,
@@ -165,30 +166,51 @@
 }
 
 GoToWebButton#help_button {
-    padding: 2px;
-}
-
-GoToWebButton#share_publish_button,
-GoToWebButton#help_button {
     background: transparent;
     border: none;
     text-decoration: underline;
+    color: white;
+    padding-left: 10px;
+    padding-right: 25px;
+    background-image: url(:/external_icon_white.png);
+    background-repeat: no-repeat;
+    background-position: right;
+    background-origin: margin;
+}
+
+GoToWebButton#help_button:focus {
+    border: 2px solid #dd4814;
+    /* hack to make the mild-orange focused box dissapear */
+    padding-top: 100%;
+    padding-bottom: 100%;
+    /* end of hack */
+    /* Compensate for border so text doesn't move */
+    padding-left: 8px;
+    padding-right: 23px;
 }
 
 GoToWebButton#share_publish_button {
+    background: transparent;
+    border: none;
+    text-decoration: underline;
     color: #dd4814;
-}
-
-GoToWebButton#help_button {
-    color: white;
+    padding-left: 10px;
+    padding-right: 25px;
+    background-image: url(:/external_icon_orange.png);
+    background-repeat: no-repeat;
+    background-position: right;
+    background-origin: margin;
 }
 
 GoToWebButton#share_publish_button:focus {
     border: 2px solid #aea79f;
-}
-
-GoToWebButton#help_button:focus {
-    border: 2px solid #dd4814;
+    /* hack to make the mild-orange focused box dissapear */
+    padding-top: 100%;
+    padding-bottom: 100%;
+    /* end of hack */
+    /* Compensate for border so text doesn't move */
+    padding-left: 8px;
+    padding-right: 23px;
 }
 
 QTabBar::tab {
@@ -288,6 +310,9 @@
 QListWidget#list_devices::item {
     min-height: 48px;
 }
+QListWidget#list_devices::item:selected {
+    background: #fcece7;
+}
 
 QGroupBox#local_device_box,
 QListWidget#list_devices::item {
@@ -325,7 +350,42 @@
     background: #efedec;
 }
 
+QCheckBox {
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
 QCheckBox:focus {
     border-radius: 5px;
     border: 2px solid #dd4814;
+    /* Compensate for border */
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+GoToWebButton#edit_profile_button,
+GoToWebButton#edit_services_button,
+GoToWebButton#get_more_space_button {
+    padding-left: 8px;
+    padding-right: 25px;
+    background-image: url(:/external_icon_white.png);
+    background-repeat: no-repeat;
+    background-position: right;
+    background-origin: margin;
+}
+
+QSpinBox {
+    padding: 3px;
+}
+
+QSpinBox:focus {
+    border: 2px solid #dd4814;
+    border-radius: 5px;
+    padding: 0px;
+}
+
+
+QTreeWidget::item:selected {
+    background: #fcece7;
+    color: black;
 }
 
=== modified file 'ubuntuone/controlpanel/gui/qt/folders.py'
--- ubuntuone/controlpanel/gui/qt/folders.py	2012-03-19 20:55:52 +0000
+++ ubuntuone/controlpanel/gui/qt/folders.py	2012-03-20 13:12:17 +0000
@@ -133,8 +133,6 @@
 
         self.ui.share_publish_button.setText(FOLDERS_MANAGE_LABEL)
         self.ui.share_publish_button.uri = MANAGE_FILES_LINK
-        icon = icon_from_name('external_icon_orange')
-        self.ui.share_publish_button.setIcon(icon)
         QtGui.QApplication.instance().focusChanged.connect(self.focus_changed)
 
     def focus_changed(self, old, new):
@@ -226,6 +224,7 @@
                     # item's checkState, because of focus and navigation
                     # issues.
                     checkbox = QtGui.QCheckBox(parent=self.ui.folders)
+                    checkbox.setMaximumWidth(24)
                     self.widget_items[checkbox] = child
                     if subscribed:
                         checkbox.setCheckState(CHECKED)
 
=== modified file 'ubuntuone/controlpanel/gui/qt/gotoweb.py'
--- ubuntuone/controlpanel/gui/qt/gotoweb.py	2012-03-19 15:50:31 +0000
+++ ubuntuone/controlpanel/gui/qt/gotoweb.py	2012-03-20 13:12:17 +0000
@@ -42,8 +42,6 @@
         if self.legend is not None:
             self.setText(self.legend)
 
-        self.setIcon(qt.icon_from_name('external_icon_white'))
-        self.setLayoutDirection(QtCore.Qt.RightToLeft)
         self.clicked.connect(self.on_clicked)
         self.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))
 
 
=== modified file 'ubuntuone/controlpanel/gui/qt/tests/test_gotoweb.py'
--- ubuntuone/controlpanel/gui/qt/tests/test_gotoweb.py	2012-03-19 20:55:52 +0000
+++ ubuntuone/controlpanel/gui/qt/tests/test_gotoweb.py	2012-03-20 13:12:17 +0000
@@ -47,10 +47,6 @@
         self.ui.uri = uri
         self.assertEqual(self.ui.uri, uri)
 
-    def test_layout_direction(self):
-        """The layout direction is RightToLeft."""
-        self.assertEqual(self.ui.layoutDirection(), gui.QtCore.Qt.RightToLeft)
-
     def test_cursor_pointer(self):
         """The cursor is PointingHandCursor."""
         self.assertEqual(self.ui.cursor().shape(),