diff --git a/extensions/ql-vscode/CHANGELOG.md b/extensions/ql-vscode/CHANGELOG.md index b62c774af0d..2ccdc1a3ff3 100644 --- a/extensions/ql-vscode/CHANGELOG.md +++ b/extensions/ql-vscode/CHANGELOG.md @@ -6,6 +6,7 @@ - Ensure compare order is consistent when selecting two queries to compare. The first query selected is always the _from_ query and the query selected later is always the _to_ query. - Ensure added databases have zipped source locations for databases added as archives or downloaded from the internet. - Fix bug where it is not possible to add databases starting with `db-*`. +- Change styling of pagination section of the results page. ## 1.3.0 - 22 June 2020 diff --git a/extensions/ql-vscode/src/view/result-tables.tsx b/extensions/ql-vscode/src/view/result-tables.tsx index ba40f155c43..6cb3172fa17 100644 --- a/extensions/ql-vscode/src/view/result-tables.tsx +++ b/extensions/ql-vscode/src/view/result-tables.tsx @@ -213,14 +213,20 @@ export class ResultTables }); }; - return - - + + choosePage(e.target.value)} onKeyDown={e => { if (e.keyCode === 13) choosePage((e.target as HTMLInputElement).value); }} /> - / {numPages} - + + / {numPages} + + ; } diff --git a/extensions/ql-vscode/src/view/resultsView.css b/extensions/ql-vscode/src/view/resultsView.css index 678a58528ef..ee6f2957ef8 100644 --- a/extensions/ql-vscode/src/view/resultsView.css +++ b/extensions/ql-vscode/src/view/resultsView.css @@ -7,16 +7,47 @@ .vscode-codeql__table-selection-header { display: flex; padding: 0.5em 0; + align-items: center; } .vscode-codeql__table-selection-header select { border: 0; } +.vscode-codeql__table-selection-header button { + padding: 0.3rem; + margin: 0.2rem; + border-radius: 5px; + color: var(--vscode-editor-foreground); + background-color: var(--vscode-editorGutter-background); + cursor: pointer; + opacity: 0.8; +} + +.vscode-codeql__table-selection-header button:hover { + opacity: 1; +} + +.vscode-codeql__table-selection-header input[type="number"] { + border-radius: 0; + padding: 0.3rem; + margin: 0.2rem; + width: 2rem; + border-radius: 0; + color: var(--vscode-editor-foreground); + border: 0; + border-bottom: 1px solid var(--vscode-editor-foreground); + background-color: var(--vscode-editorGutter-background); + border-radius: 0; + outline: none; +} + .vscode-codeql__result-table-alert-extras { display: inline-block; text-align: left; margin-left: auto; + background-color: transparent; + color: inherit; } .vscode-codeql__result-table-toggle-diagnostics { @@ -34,11 +65,11 @@ margin: 3px 3px 1px 13px; } - .vscode-codeql__result-table th { border-top: 1px solid rgba(88, 96, 105, 0.25); border-bottom: 1px solid rgba(88, 96, 105, 0.25); - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; background: rgba(225, 228, 232, 0.25); padding: 0.25em 0.5em; text-align: center; @@ -146,7 +177,7 @@ td.vscode-codeql__path-index-cell { .octicon { fill: var(--vscode-editor-foreground); - margin-top: .25em; + margin-top: 0.25em; } .octicon-light {