diff --git a/js/about/preferences.js b/js/about/preferences.js index 06b7628bf3c..bf7b1cd41c9 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -20,6 +20,7 @@ const {passwordManagers, extensionIds} = require('../constants/passwordManagers' const aboutActions = require('./aboutActions') const getSetting = require('../settings').getSetting const SortableTable = require('../components/sortableTable') +const FixedHeaderTable = require('../components/fixedHeaderTable') const Button = require('../components/button') const searchProviders = require('../data/searchProviders') const moment = require('moment') @@ -258,11 +259,11 @@ class LedgerTable extends ImmutableComponent { return null } return
- this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS() diff --git a/js/components/fixedHeaderTable.js b/js/components/fixedHeaderTable.js new file mode 100644 index 00000000000..e9a31ba88ec --- /dev/null +++ b/js/components/fixedHeaderTable.js @@ -0,0 +1,20 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +const React = require('react') +const ImmutableComponent = require('./immutableComponent') +const SortableTable = require('./sortableTable') + +class FixedHeaderTable extends ImmutableComponent { + render () { + return
+
+
+ +
+
+ } +} + +module.exports = FixedHeaderTable diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js index 0db78698607..64f81bb9a63 100644 --- a/js/components/sortableTable.js +++ b/js/components/sortableTable.js @@ -80,9 +80,10 @@ class SortableTable extends ImmutableComponent { return + data-sort-order={this.props.defaultHeadingSortOrder}> +
+ })} diff --git a/less/about/preferences.less b/less/about/preferences.less index c82ecf0747d..f73fe619e1d 100644 --- a/less/about/preferences.less +++ b/less/about/preferences.less @@ -549,8 +549,6 @@ table.sortableTable { } #ledgerTable { - height: ~"-webkit-calc(100vh - 300px)"; - overflow-y: auto; tr { th, @@ -559,6 +557,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; + } + } + } + } + } .modal .dialog.paymentHistory .sectionTitle {