Merge pull request #4509 from bsclifton/fix-sortable-table-column-header

Update sortableTable styles to be consistent
brave · Oct 4, 2016 · fc03b69 · fc03b69
2 parents b65291d + d6bbba5
commit fc03b69
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 47 deletions.
diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -681,7 +681,8 @@ class SearchTab extends ImmutableComponent {
       <div className='sectionTitle' data-l10n-id='searchSettings' />
       <SortableTable headings={['default', 'searchEngine', 'engineGoKey']} rows={this.searchProviders}
         defaultHeading='searchEngine'
-        addHoverClass onClick={this.hoverCallback.bind(this)} />
+        addHoverClass onClick={this.hoverCallback.bind(this)}
+        columnClassNames={['default', 'searchEngine', 'engineGoKey']} />
       <div className='sectionTitle' data-l10n-id='locationBarSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='showOpenedTabMatches' prefKey={settings.OPENED_TAB_SUGGESTIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />

diff --git a/less/about/history.less b/less/about/history.less
@@ -87,9 +87,6 @@ body {
     }
 
     .sortableTable {
-      border-spacing: 0px;
-      cursor: default;
-
       // Time visited
       .time {
         font-size: 11pt;

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -75,8 +75,10 @@ body {
 
 .sectionTitle {
   color: @braveOrange;
+  cursor: default;
   font-size: 1.2em;
   margin-bottom: 0.7em;
+  -webkit-user-select: none;
 }
 
 .prefTabContainer {
@@ -522,6 +524,16 @@ table.sortableTable {
     color: @braveOrange;
     font-weight: 800;
   }
+
+  .default {
+    width: 150px;
+  }
+  .searchEngine {
+    width: 304px !important;
+  }
+  .engineGoKey {
+    width: 250px;
+  }
 }
 
 .paymentsMessage {
@@ -558,41 +570,42 @@ table.sortableTable {
   }
 
   .fixed-table-container {
-     height: 500px;
-     position: relative;
-
-     .table-header {
-       height: 30px;
-       background: @veryLightGray;
-       position: absolute;
-       top: 0;
-       right: 0;
-       left: 0;
-     }
-
-     .fixed-table-container-inner {
-       overflow-x: hidden;
-       overflow-y: auto;
-       height: 100%;
-
-       table {
-         width: 100%;
-         overflow-x: hidden;
-         overflow-y: auto;
-
-         .th-inner {
-           color: @darkGray;
-           font-weight: 600;
-           position: absolute;
-           top: 0;
-           line-height: 30px;
-           z-index: 9;
-           background: @veryLightGray;
-         }
-       }
-     }
-   }
+    height: 500px;
+    position: relative;
+
+    .table-header {
+      height: 30px;
+      background: @veryLightGray;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
 
+    .fixed-table-container-inner {
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: 100%;
+
+      table {
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .th-inner {
+          color: @darkGray;
+          cursor: default;
+          font-weight: 600;
+          position: absolute;
+          top: 0;
+          line-height: 30px;
+          z-index: 9;
+          background: @veryLightGray;
+          -webkit-user-select: none;
+        }
+      }
+    }
+  }
 }
 
 .modal .dialog.paymentHistory .sectionTitle {

diff --git a/less/about/siteDetails.less b/less/about/siteDetails.less
@@ -25,14 +25,14 @@
 }
 
 .searchInput {
-    float: right;
-    padding: 5px;
-    margin-top: -35px;
+  float: right;
+  padding: 5px;
+  margin-top: -35px;
 }
 
 .searchInputClear {
-    float: right;
-    padding: 8px;
-    margin-top: -39px;
-    color: #999;
+  float: right;
+  padding: 8px;
+  margin-top: -39px;
+  color: #999;
 }
diff --git a/less/sortableTable.less b/less/sortableTable.less
@@ -17,9 +17,12 @@ table.sort {
 table.sortableTable {
   width: 100%;
   border: solid 1px @lightGray;
-  border-radius: @borderRadius;
+  border-bottom-left-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
   margin-bottom: 40px;
   box-shadow: @softBoxShadow;
+  cursor: default;
+  border-spacing: 0;
 
   tr {
     height: 1.7em;
@@ -32,7 +35,11 @@ table.sortableTable {
       font-weight: 300;
       padding: 8px;
       box-sizing: border-box;
-      -webkit-user-select: none;
+
+      .th-inner {
+        display: inline-block;
+        -webkit-user-select: none;
+      }
 
       &:after {
         font-family: FontAwesome;