diff --git a/js/about/history.js b/js/about/history.js
index 90060bb0dd5..51676458710 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -23,6 +23,37 @@ require('../../less/about/siteDetails.less')
require('../../less/about/history.less')
require('../../node_modules/font-awesome/css/font-awesome.css')
+class DeleteHistoryEntryButton extends ImmutableComponent {
+ constructor () {
+ super()
+ this.onClick = this.onClick.bind(this)
+ }
+
+ onClick (e) {
+ if (e && e.preventDefault) {
+ e.preventDefault()
+ }
+ // BSCTODO: ...
+ }
+
+ render () {
+ return
-
+
{
this.state.search
?
- : null
+ :
}
diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
index 5b22f410472..0db78698607 100644
--- a/js/components/sortableTable.js
+++ b/js/components/sortableTable.js
@@ -92,8 +92,12 @@ class SortableTable extends ImmutableComponent {
const entry = row.map((item, j) => {
const value = typeof item === 'object' ? item.value : item
const html = typeof item === 'object' ? item.html : item
+ const cell = typeof item === 'object' ? item.cell : item
+
return
- {value === true ? '✕' : html}
+ {
+ cell || (value === true ? '✕' : html)
+ }
|
})
const rowAttributes = this.getRowAttributes(row, i)
diff --git a/less/about/history.less b/less/about/history.less
index d78d61664d6..583bc4dffea 100644
--- a/less/about/history.less
+++ b/less/about/history.less
@@ -27,6 +27,7 @@ body {
.sectionTitle {
font-size: 28px;
display: inline-block;
+ -webkit-user-select: none;
}
.headerActions {
float: right;
@@ -45,7 +46,14 @@ body {
height: 22px;
}
.searchInputPlaceholder {
+ color: @gray;
+ float: none;
font-family: FontAwesome;
+ left: -35px;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 0;
}
.searchInputClear {
float: none;
@@ -67,7 +75,7 @@ body {
.siteDetailsPageContent {
border-top: 0px;
- margin-top: 15px;
+ margin-top: 50px;
display: block;
clear: both;
@@ -75,52 +83,41 @@ body {
font-size: 16px;
margin-bottom: 12px;
padding-left: 40px;
+ -webkit-user-select: none;
}
.sortableTable {
border-spacing: 0px;
+ cursor: default;
+ // Time visited
.time {
- color: #656565;
+ font-size: 11pt;
font-weight: 800;
text-align: center;
width: 154px;
+
+ // Delete button
+ .deleteEntry {
+ display: none;
+ }
+ &:hover .deleteEntry{
+ color: @gray;
+ }
}
+
+ // Entry title
.title {
max-width: 415px;
text-overflow: ellipsis;
overflow: hidden;
+ font-size: 11pt;
+ white-space: nowrap;
}
- .domain {
- }
- }
-
- .historyList {
- padding-top: 10px;
- overflow: hidden;
- .listItem {
- display: flex;
- height: 1rem;
- padding-left: 5px;
-
- &:hover {
- background: #ffcc99;
- }
- .aboutListItem {
- align-items: center;
- }
- .aboutItemLocation {
- margin-left: 10px;
- }
- .aboutItemDate {
- color: #aaa;
- margin-right: 10px;
- }
- }
-
- .sortableTable {
- cursor: default;
+ // Entry domain
+ .domain {
+ font-size: 11pt;
}
}
}
diff --git a/less/sortableTable.less b/less/sortableTable.less
index 5b274eaffef..a044f6fc5d7 100644
--- a/less/sortableTable.less
+++ b/less/sortableTable.less
@@ -6,9 +6,7 @@
table.sort {
th {
- cursor: pointer;
- text-decoration: underline;
- color: @darkGray;
+ color: @gray;
&:hover {
color: #000;
@@ -28,11 +26,32 @@ table.sortableTable {
padding: 5px 20px;
th {
- background: @lightGray;
+ background: linear-gradient(to bottom, @lightGray, @veryLightGray);
+ border-top: 1px solid @gray;
text-align: left;
font-weight: 300;
padding: 8px;
box-sizing: border-box;
+ -webkit-user-select: none;
+
+ &:after {
+ font-family: FontAwesome;
+ font-size: 8pt;
+ margin-top: 3px;
+ margin-right: 3px;
+ float: right;
+ }
+
+ &.sort-up:after {
+ content: "\f077";
+ }
+
+ &.sort-down:after {
+ content: "\f078";
+ }
+ }
+ th + th {
+ border-left: 1px solid @braveOrange;
}
td {
@@ -40,10 +59,6 @@ table.sortableTable {
-webkit-font-smoothing: antialiased;
width: auto;
- &:not(:first-of-type) {
- border-bottom: solid 1px @lightGray;
- }
-
&:nth-of-type(2) {
width: 60%;
}
diff --git a/test/about/historyTest.js b/test/about/historyTest.js
new file mode 100644
index 00000000000..c2808789367
--- /dev/null
+++ b/test/about/historyTest.js
@@ -0,0 +1,46 @@
+/* global describe, it, before */
+
+const Brave = require('../lib/brave')
+const {urlInput} = require('../lib/selectors')
+const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+const aboutHistoryUrl = getTargetAboutUrl('about:history')
+
+describe('about:history', function () {
+ Brave.beforeAll(this)
+
+ before(function * () {
+ yield this.app.client
+ .waitUntilWindowLoaded()
+ .waitForUrl(Brave.newTabUrl)
+ .waitForBrowserWindow()
+ .waitForVisible('#window')
+ .waitForVisible(urlInput)
+ .windowByUrl(Brave.browserWindowUrl)
+ .addSite({ location: 'https://brave.com', title: 'Brave' })
+ .addSite({ location: 'https://brave.com/test', customTitle: 'customTest' })
+ .addSite({ location: 'https://www.youtube.com' })
+ .waitForExist('.tab[data-frame-key="1"]')
+ .tabByIndex(0)
+ .url(aboutHistoryUrl)
+ })
+
+ it('displays entries with title as: title or URL', function * () {
+ yield this.app.client
+ .waitForVisible('table.sortableTable td.title[data-sort="Brave"]')
+ .waitForVisible('table.sortableTable td.title[data-sort="https://www.youtube.com"]')
+ })
+
+ it('does NOT use customTitle when displaying entries', function * () {
+ yield this.app.client
+ .waitForVisible('table.sortableTable td.title[data-sort="customTest"]', 1000, true)
+ })
+
+ // shows ordered by date
+
+ it('defaults to sorting table by time DESC', function * () {
+ yield this.app.client
+ .waitForVisible('table.sortableTable thead tr th.sort-up[data-l10n-id="time"]')
+ })
+
+ // search box
+})