Merge lp:~nataliabidart/ubuntuone-control-panel/ui-style-fixes into lp:ubuntuone-control-panel

[Natalia Bidart]

- Consistenly name the application "Ubuntu One" (no more "Control Panel" suffix) (LP: #827465).
- Application font size should be 13px (LP: #824568).
- Font size for tabs is now 13px (since every widget has that size set as default) (LP: #824549).
- AbstractItemView should only have top and bottom borders (LP: #822665)
- Removed button fixed height, button styles will be fixed later.
- Fixed bottom area as per indications in bug report (LP: #824559).
- Fonts are no longer black but #333333 (LP: #824546).
- Swapped background color for AbstractItemView rows (LP: #822679).

[Diego Sarmentero (diegosarmentero)]

+1

review: Approve

[Roberto Alsina (ralsina)]

In line 70 of the diff:

Instead of setting a fixed height of 30px, you should set the vertical sizePolicy to minimum, and the desired paddings.

While that may not result in a 30px tall frame, it will produce one with symmetrical padding, which is impossible to guarantee with fixed heights unless you fix the height of everything.

Fixing the height of everything is probably not practical because there are elements containing texts so the heights are dictated by the font sizes.

While we are using fixed point sizes (13px in most cases), that doesn't mean the texts themselves are 13px tall, because of descents.

Also, the use of fixed font sizes in px is probably an accessibility problem (it will not respect accessibility themes, like the ones with large fonts), and maybe should be discussed with design later on.

review: Needs Fixing

[Natalia Bidart (nataliabidart)]

> In line 70 of the diff:
>
> Instead of setting a fixed height of 30px, you should set the vertical
> sizePolicy to minimum, and the desired paddings.

Thanks for pointing this out. I agree with this, but the design spec states clearly that the height should be 30px: you can check this out in bug #824559 and in the spec file win_client_bottom_area.pdf inside the share Lisette made (under client/RTC/specs).

I also think that we should not have the font fixed to a given size... but not sure how to handle this with the design team.

[Roberto Alsina (ralsina)]

Mailing Lisette and you about this.

[Roberto Alsina (ralsina)]

Approving since it's according to spec, we'll review these when/if we change the spec.

review: Approve

=== modified file 'bin/ubuntuone-control-panel-gtk'
--- bin/ubuntuone-control-panel-gtk	2011-05-24 14:20:18 +0000
+++ bin/ubuntuone-control-panel-gtk	2011-08-17 18:07:23 +0000
@@ -39,12 +39,12 @@
     result = OptionParser(usage=usage)
     result.add_option("", "--switch-to", dest="switch_to", type="string",
                       metavar="PANEL_NAME", default="",
-                      help="Start the Ubuntu One Control Panel (GTK) in the "
+                      help="Start Ubuntu One in the "
                            "PANEL_NAME tab. Possible values are: "
                            "dashboard, volumes, devices, applications")
     result.add_option("-a", "--alert", dest="alert", action="store_true",
-                      default=False, help="Start the Ubuntu One Control Panel "
-                      "(GTK) alerting the user to its presence.")
+                      default=False, help="Start Ubuntu One "
+                      "alerting the user to its presence.")
     return result
 
 

=== modified file 'bin/ubuntuone-control-panel-qt'
--- bin/ubuntuone-control-panel-qt	2011-06-16 19:49:43 +0000
+++ bin/ubuntuone-control-panel-qt	2011-08-17 18:07:23 +0000
@@ -39,12 +39,12 @@
     result = OptionParser(usage=usage)
     result.add_option("", "--switch-to", dest="switch_to", type="string",
                       metavar="PANEL_NAME", default="",
-                      help="Start the Ubuntu One Control Panel (QT) in the "
+                      help="Start Ubuntu One in the "
                            "PANEL_NAME tab. Possible values are: "
                            "dashboard, volumes, devices, applications")
     result.add_option("-a", "--alert", dest="alert", action="store_true",
-                      default=False, help="Start the Ubuntu One Control Panel "
-                      "(QT) alerting the user to its presence.")
+                      default=False, help="Start Ubuntu One "
+                      "alerting the user to its presence.")
     return result
 
 

=== modified file 'data/facebook.png'
Binary files data/facebook.png	2011-01-25 16:35:59 +0000 and data/facebook.png	2011-08-17 18:07:23 +0000 differ
=== modified file 'data/qt/controlpanel.ui'
--- data/qt/controlpanel.ui	2011-08-05 18:07:09 +0000
+++ data/qt/controlpanel.ui	2011-08-17 18:07:23 +0000
@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>387</width>
-    <height>203</height>
+    <width>367</width>
+    <height>142</height>
    </rect>
   </property>
   <property name="sizePolicy">
@@ -233,22 +233,25 @@
    </item>
    <item>
     <widget class="QFrame" name="frame_footer">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="maximumSize">
+      <size>
+       <width>16777215</width>
+       <height>30</height>
+      </size>
+     </property>
      <layout class="QHBoxLayout" name="horizontalLayout">
       <property name="spacing">
        <number>5</number>
       </property>
-      <property name="leftMargin">
-       <number>3</number>
-      </property>
-      <property name="topMargin">
+      <property name="margin">
        <number>0</number>
       </property>
-      <property name="rightMargin">
-       <number>3</number>
-      </property>
-      <property name="bottomMargin">
-       <number>3</number>
-      </property>
       <item>
        <widget class="GoToWebButton" name="help_button">
         <property name="text">
@@ -282,49 +285,49 @@
        </widget>
       </item>
       <item>
-       <widget class="QToolButton" name="twitter_button">
+       <widget class="QPushButton" name="twitter_button">
+        <property name="sizePolicy">
+         <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+          <horstretch>0</horstretch>
+          <verstretch>0</verstretch>
+         </sizepolicy>
+        </property>
+        <property name="maximumSize">
+         <size>
+          <width>16</width>
+          <height>16</height>
+         </size>
+        </property>
         <property name="cursor">
          <cursorShape>PointingHandCursor</cursorShape>
         </property>
-        <property name="styleSheet">
-         <string notr="true">border: 0;</string>
-        </property>
-        <property name="text">
-         <string/>
-        </property>
         <property name="icon">
          <iconset resource="images.qrc">
           <normaloff>:/twitter.png</normaloff>:/twitter.png</iconset>
         </property>
-        <property name="iconSize">
-         <size>
-          <width>22</width>
-          <height>22</height>
-         </size>
-        </property>
        </widget>
       </item>
       <item>
-       <widget class="QToolButton" name="facebook_button">
+       <widget class="QPushButton" name="facebook_button">
+        <property name="sizePolicy">
+         <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+          <horstretch>0</horstretch>
+          <verstretch>0</verstretch>
+         </sizepolicy>
+        </property>
+        <property name="maximumSize">
+         <size>
+          <width>16</width>
+          <height>16</height>
+         </size>
+        </property>
         <property name="cursor">
          <cursorShape>PointingHandCursor</cursorShape>
         </property>
-        <property name="styleSheet">
-         <string notr="true">border: 0;</string>
-        </property>
-        <property name="text">
-         <string/>
-        </property>
         <property name="icon">
          <iconset resource="images.qrc">
           <normaloff>:/facebook.png</normaloff>:/facebook.png</iconset>
         </property>
-        <property name="iconSize">
-         <size>
-          <width>22</width>
-          <height>22</height>
-         </size>
-        </property>
        </widget>
       </item>
      </layout>

=== modified file 'data/qt/images.qrc'
--- data/qt/images.qrc	2011-07-14 17:57:17 +0000
+++ data/qt/images.qrc	2011-08-17 18:07:23 +0000
@@ -10,6 +10,8 @@
     <file>../computer.png</file>
     <file>../phone.png</file>
     <file>../twitter.png</file>
+    <file>../twitter.png</file>
+    <file>../facebook.png</file>
     <file>../facebook.png</file>
     <file>../external_icon_white.png</file>
     <file>../Ubuntu-R.ttf</file>

=== modified file 'data/qt/mainwindow.ui'
--- data/qt/mainwindow.ui	2011-07-21 20:06:19 +0000
+++ data/qt/mainwindow.ui	2011-08-17 18:07:23 +0000
@@ -23,7 +23,7 @@
    </size>
   </property>
   <property name="windowTitle">
-   <string>Ubuntu One Control Panel</string>
+   <string>Ubuntu One</string>
   </property>
   <property name="windowIcon">
    <iconset resource="images.qrc">

=== modified file 'data/qt/ubuntuone.qss'
--- data/qt/ubuntuone.qss	2011-08-05 21:20:21 +0000
+++ data/qt/ubuntuone.qss	2011-08-17 18:07:23 +0000
@@ -4,6 +4,8 @@
 
 QWidget {
     font-family: "Ubuntu";
+    font-size: 13px;
+    color: #333333;
 }
 
 QFrame {
@@ -51,7 +53,6 @@
     color: white;
     border-color: #939389;
     border-width: 1px;
-    height: 14px;
 }
 
 QPushButton:hover[enabled="true"] {
@@ -63,7 +64,6 @@
     color: white;
     border-color: #939389;
     border-width: 1px;
-    height: 12px;
 }
 
 QPushButton:pressed[enabled="true"] {
@@ -75,7 +75,6 @@
     color: white;
     border-color: #939389;
     border-width: 1px;
-    height: 12px;
 }
 
 QPushButton[enabled="false"] {
@@ -87,14 +86,12 @@
     color: #595959;
     border-color: #939389;
     border-width: 1px;
-    height: 12px;
 }
 
 QPushButton#help_button {
     background: transparent;
     border: none;
     color: white;
-    height: 20px;
     text-decoration: underline;
     padding: 0px;
 }
@@ -109,6 +106,11 @@
     padding: 5px;
 }
 
+QPushButton#twitter_button,
+QPushButton#facebook_button {
+    border: none;
+}
+
 GoToWebButton#share_publish_button {
     background: transparent;
     border: none;
@@ -235,8 +237,10 @@
 
 QAbstractItemView {
     border-style: solid;
-    border-color: #333333;
-    border-width: 1px;
-    alternate-background-color: #efedec;
-    background: #f7f6f5;
+    border-color: #898989;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    alternate-background-color: #f7f6f5;
+    background: #efedec;
 }
+

=== modified file 'data/twitter.png'
Binary files data/twitter.png	2011-01-25 16:35:59 +0000 and data/twitter.png	2011-08-17 18:07:23 +0000 differ