Skip to content

Augments the pagination styling #485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aeisenberg merged 2 commits into from
Jul 6, 2020
Merged

Augments the pagination styling #485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b23d26b
Change styling on pagination section
aeisenberg Jul 2, 2020
c20eac1
Update changelog
aeisenberg Jul 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions extensions/ql-vscode/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 11 additions & 5 deletions extensions/ql-vscode/src/view/result-tables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,14 +213,20 @@ export class ResultTables
});
};

return <span>
<button onClick={prevPage} >&lt;</button>
<input size={3} value={this.state.selectedPage} onChange={onChange}
return <span className="vscode-codeql__table-selection-header">
<button onClick={prevPage} >&#xab;</button>
<input
type="number"
size={3}
value={this.state.selectedPage}
onChange={onChange}
onBlur={e => choosePage(e.target.value)}
onKeyDown={e => { if (e.keyCode === 13) choosePage((e.target as HTMLInputElement).value); }}
/>
/ {numPages}
<button value=">" onClick={nextPage} >&gt;</button>
<span>
/ {numPages}
</span>
<button value=">" onClick={nextPage} >&#xbb;</button>
</span>;
}

Expand Down
37 changes: 34 additions & 3 deletions extensions/ql-vscode/src/view/resultsView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down