ribbon improvements

examples/BasicApp.html

@@ -17,9 +17,28 @@
         <div class="uwt-ribbon-tab-content uwt-visible">
           <div class="uwt-ribbon-tab-group">
             <div class="uwt-content">
-              Test
+              <div class="uwt-button uwt-ribbon-command">
+                <img class="uwt-icon" src="images/class-32x32.png"  />
+                <div class="uwt-title">Class</div>
+              </div>
+              <div class="uwt-ribbon-command-container uwt-orientation-vertical">
+                <div class="uwt-button uwt-ribbon-command">
+                  <img class="uwt-icon" src="images/attribute-16x16.png" />
+                  <div class="uwt-title">Attribute</div>
+                </div>
+                <div class="uwt-button uwt-ribbon-command">
+                  <img class="uwt-icon" src="images/relationship-16x16.png"  />
+                  <div class="uwt-title">Relationship</div>
+                </div>
+                <div class="uwt-button uwt-ribbon-command">
+                  <img class="uwt-icon" src="images/task-16x16.png"  />
+                  <div class="uwt-title">Task</div>
+                </div>
+              </div>
+            </div>
+            <div class="uwt-title">
+              Create
             </div>
-            <div class="uwt-title">Clipboard</div>
           </div>
         </div>
         <div class="uwt-ribbon-tab-content">

src/uwt-web/common/uwt-ribbon.less

@@ -126,12 +126,21 @@ div.uwt-ribbon
 					}
 					.uwt-ribbon-command
 					{
+						position: relative;
 						margin: 2px;
 						vertical-align: top;
+						text-align: left;
+
 						div.uwt-title
 						{
+							color: #15428b;
 							padding: 2px 4px;
 							text-align: center;
+
+							position: absolute;
+							left: 0px;
+							right: 0px;
+							bottom: 0px;
 						}
 						
 						img
@@ -140,6 +149,8 @@ div.uwt-ribbon
 							margin-left: auto;
 							margin-right: auto;
 
+							margin-top: 16px;
+							
 							width: 32px;
 							padding: 4px;
 						}
@@ -147,6 +158,8 @@ div.uwt-ribbon
 						{
 							border: solid 1px transparent;
 							border-radius: 3px;
+							min-height: 94px;
+							padding: 0px;
 						}
 						&.uwt-ribbon-hide-title > div.uwt-title
 						{
@@ -184,8 +197,24 @@ div.uwt-ribbon
 						
 						&.uwt-orientation-vertical > .uwt-ribbon-command
 						{
-							&> img { display: inline-block; }
+							padding-left: 24px;
-							&> div.uwt-title { display: inline-block; text-align: left; }
+							&> img
+							{
+								display: inline-block;
+								margin-left: -24px;
+								margin-top: 0px;
+							}
+							&> div.uwt-title
+							{
+								display: inline-block;
+								text-align: left;
+								margin-left: 24px;
+								top: 0px;
+							}
+							&.uwt-button
+							{
+								min-height: 28px;
+							}
 						}
 					}
 				}
@@ -196,6 +225,9 @@ div.uwt-ribbon
 					left: 0px;
 					right: 0px;
 					text-align: center;
+
+					padding: 2px;
+					font-size: 0.8em;
 				}
 			}
 		}

src/uwt-web/themes/mso12/uwt-ribbon.less

@@ -62,6 +62,43 @@ div.uwt-ribbon
 		&> div.uwt-ribbon-tab-content
 		{
 			background: linear-gradient(to bottom, #dbe6f4 0%, #cfddef 40%, #c9d9ed 41%, #e7f2ff 100%);
+
+			&> div.uwt-ribbon-tab-group
+			{
+				border: 1px solid #9ebfdb;
+				border-top-color: #c5d2df;
+				&> div.uwt-title
+				{
+					background: linear-gradient(to bottom, #c2d8f1 0%, #c0d8ef 100%);
+					color: #3e6aaa;
+				}
+
+				&:hover
+				{
+					background: linear-gradient(to bottom, #e4effd 0%, #e8f0fc 40%, #dceafb 41%, #dce8f8 100%);
+					&> div.uwt-title
+					{
+						background: linear-gradient(to bottom, #c8e0ff 0%, #d6edff 100%);
+					}
+				}
+
+				&> div.uwt-content
+				{
+					div.uwt-ribbon-command
+					{
+						&.uwt-button
+						{
+							border: 1px solid transparent;
+							&:hover
+							{
+								background: linear-gradient(to bottom, #fffdec 0%, #ffedb3 50%, #ffda6e 51%, #ffe9a4 100%);
+								border-color: #dbce99;
+								border-bottom-color: #cbc3aa;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 }