Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bug 429825 - UI Style Tweaks 
- Sections got a makeover and an animation on expand/collapse
- Dropdown selection and file explorer "checkedRow" class has bold accent color on left side with lighter tint of the same color throughout.
- Dropdown menu trigger buttons now look as though they are part of the menu when it is open.
  • Loading branch information
@elijahe
elijahe committed Mar 6, 2014
1 parent 8f6b2e4 commit a839db3
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 90 deletions.
86 changes: 42 additions & 44 deletions bundles/org.eclipse.orion.client.ui/web/css/ide.css
View file
Expand Up @@ -651,15 +651,15 @@ textarea.parameterInput {
}

.treetable {
border-collapse: collapse;
border-spacing: 0;
width:100%;
}

.miniNavTreeTable {
border-spacing: 0;
width:100%;
padding-left:10px;
padding-right:10px;
padding-left:4px;
}

.secondaryColumn {
Expand Down Expand Up @@ -896,40 +896,6 @@ input {
padding-right: 3px;
}

.dropDownContainer{
border-radius:1px;
background:#fefefe;
border: 1px solid #DDD;
padding:10px;
margin-top: 5px;
outline: none;
position:absolute;
z-index:100;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}


.dropDownContainer ul {
list-style: none;
padding:0;
}

.dropDownContainer ul li a {
display: block;
padding: 5px 15px;
color:#3087B3;
line-height: 1;
}

.dropDownContainer ul li a:focus,
.dropDownContainer ul li a:hover {
color:#F58B0F;
}

.dropDownContainer ul li a:active {
background: #ddd;
}

.groupedContentDivider{
float: left;
width: 1px;
Expand Down Expand Up @@ -993,9 +959,8 @@ input {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin-left: 5%;
margin-right: 5%;
margin-top: 30px;
overflow-y: hidden; /* prevent vertical scrollbar from showing during expand/collapse */
}

.mainpane .sectionTable .treetable, .mainpane .sectionWrapper .treetable, .mainpane .sectionTable .treetable .actionsColumn{
Expand All @@ -1011,25 +976,58 @@ input {

.sectionTable {
margin-top: 0;
margin-left: 6%;
margin-right: 6%;
border: 1px solid;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-color:#dadada;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

/* sectionTable preceeded by a sectionWrapper */
.sectionWrapper+.sectionTable {
margin-top: 2px;
border-top: none;
}

.sectionTable:last-child {
margin-bottom: 20px;
}

.sectionWrapperClosed{
border-bottom: 1px solid;
.sectionTable.sectionClosed {
height: 0;
border-bottom-color: transparent;
box-shadow: none;
}

.sectionWrapper{
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border: 1px solid;
margin-left: 5%;
margin-right: 5%;
background: none repeat scroll 0 0 #f4f4f4;
vertical-align: middle;
font-weight: bold;
padding: 6px;
color: gray;
margin-bottom: 0;
border-color: #dadada;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
transition: all 0.5s ease;
}

.sectionWrapper.sectionClosed {
box-shadow: none;
opacity: 0.9;
background: none;
}

.sectionWrapper.sectionClosed:hover {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
opacity: 1;
transition: all 0.3s;
}

.sectionTable td {
Expand Down Expand Up @@ -1083,7 +1081,7 @@ input {
}

.orionProject .discreetInput {
border: none;
border: 1px solid transparent; /* prevent movement on hover */
color: gray;
font: 8pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif;
width: 90%;
Expand Down
71 changes: 44 additions & 27 deletions bundles/org.eclipse.orion.client.ui/web/css/theme.css
View file
Expand Up @@ -91,6 +91,19 @@ a:hover {
background-color: #cedce7 !important; /* was e3e3e3 */
}

.navRow > td:first-child {
border-left: 6px solid transparent;
}

.navRow.checkedRow > td:first-child {
border-left-color: #7fa4c0;
}

.navbar-item-selected {
background: #FEC;
color: black;
}

/* Breadcrumbs */

.breadcrumb {
Expand Down Expand Up @@ -126,6 +139,7 @@ a.breadcrumb:hover {
text-decoration: none;
line-height: 10pt;
white-space:nowrap;
text-shadow: rgba(0,0,0,0.25) 0 2px 2px;
}

a.currentLocation:hover {
Expand Down Expand Up @@ -246,10 +260,13 @@ a.currentLocation:hover {
background-color: #ddd;
border-radius: 2px;
vertical-align:middle;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.commandButton:hover, .commandButton:focus {
background-color: #eee;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}

.commandButton.disabled {
Expand Down Expand Up @@ -346,7 +363,7 @@ a.currentLocation:hover {

.dropdownTrigger:not(.dropdownDefaultButton) {
font-weight: normal;
background: none !important;
background: none;
border-color: transparent;
}

Expand All @@ -359,29 +376,19 @@ a.currentLocation:hover {
}

.dropdownMenu {
box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, .2);
color: #555;
background-color: #fbfbfb;
background-color: white;
border-collapse: separate;
border: 1px solid #bbbbbb;
border-radius: 1px;
visibility: hidden;
z-index: 150;
position: absolute;
list-style-type: none;
display: none; /* don't take part in layout until open */
line-height: normal; /* don't want to inherit strange line-heights from ancestor elements */
margin: 0; /* needed for context menu positioning to work properly */


-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.218s;
-moz-transition: opacity 0.218s;
-o-transition: opacity 0.218s;
transition: opacity 0.218s;
background: #ffffff;
border: 1px solid #ddd;
cursor: default;
font-size: 12px;
margin: 0;
Expand All @@ -407,8 +414,7 @@ a.currentLocation:hover {

.dropdownMenu > li {
min-width: 120px;
padding: 0 2px;
display: block;
display: flex;
}

.dropdownMenu > li > a, .dropdownMenu > li > span {
Expand All @@ -418,12 +424,6 @@ a.currentLocation:hover {

.dropdownMenu > li > *:focus {
outline: none;
background: #f3f6fe;
}

.dropdownMenu > li:hover {
text-decoration: none;
background: #ffeecc;
}


Expand All @@ -439,7 +439,7 @@ a.currentLocation:hover {
display: inline-block;
vertical-align: middle;
color: #555 !important;
padding: 3px 5px;
padding: 3px 3px 3px 5px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
Expand All @@ -448,6 +448,12 @@ a.currentLocation:hover {
-ms-user-select: none;
user-select: none;
white-space: nowrap;
border-left: 6px solid transparent;
}

.dropdownMenu .dropdownMenuItemSelected {
background-color: #FEEFDE;
border-left-color: #F58B0F;
}

.dropdownMenuItem .check {
Expand All @@ -469,8 +475,19 @@ a.currentLocation:hover {
}

.dropdownSelection {
background-color: #e6e6e6 !important;
border: 1px solid #ccc !important;
/* Using !important everywhere because this class is used by
* a variety of elements making it difficult to increase the
* specificity correctly for all users.
*/
background-color: white !important;
border: 1px solid #bbbbbb !important;
border-bottom: none !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, .2) !important;
margin-bottom: -1px !important;
position: relative !important;
z-index: 200 !important;
}

.checkedMenuItem {
Expand Down

0 comments on commit a839db3

Please sign in to comment.