diff --git a/dist/styles.css b/dist/styles.css index 1fb341e..be7999a 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -154,6 +154,9 @@ nav .progress { text-align: center; vertical-align: middle; } +body.darwin .btn-group .seperator { + line-height: 32px; +} .btn-group .seperator::before { content: "|"; } @@ -181,12 +184,15 @@ nav.menu-on .btn-group .btn.system, nav.hide-btns .btn-group .btn.system { nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system { color: var(--white); } -.btn-group .btn:hover { +.btn-group .btn:hover, .ms-Nav-compositeLink:hover { background-color: #0001; } -.btn-group .btn:active { +.btn-group .btn:active, .ms-Nav-compositeLink:active { background-color: #0002; } +.ms-Nav-compositeLink:hover .ms-Nav-link { + background: none; +} .btn-group .btn.disabled, .btn-group .btn.fetching { background-color: unset !important; color: var(--neutralSecondaryAlt); @@ -661,11 +667,13 @@ img.favicon { cursor: pointer; animation-fill-mode: none; } -.card:hover, .card:focus { - box-shadow: #0006 0px 5px 40px; +.card:focus, .list-card:focus { outline: none; } -.card:focus::after, .list-card:focus::after { +.card:hover, .ms-Fabric--isFocusVisible .card:focus { + box-shadow: #0006 0px 5px 40px; +} +.ms-Fabric--isFocusVisible .card:focus::after, .ms-Fabric--isFocusVisible .list-card:focus::after { content: ""; position: absolute; top: 2px; @@ -705,7 +713,9 @@ img.favicon { transition: transform ease-out .12s; } .card.transform:hover img.head, .card.transform:hover p, .card.transform:hover h3, -.card.transform:focus img.head, .card.transform:focus p, .card.transform:focus h3 { +.ms-Fabric--isFocusVisible .card.transform:focus img.head, +.ms-Fabric--isFocusVisible .card.transform:focus p, +.ms-Fabric--isFocusVisible .card.transform:focus h3 { transform: translateY(-144px); } .card h3.title { @@ -759,9 +769,8 @@ img.favicon { cursor: pointer; box-shadow: #0000 0px 5px 15px; } -.list-card:hover, .list-card:focus { +.list-card:hover, .ms-Fabric--isFocusVisible .list-card:focus { box-shadow: #0004 0px 5px 15px; - outline: none; } .list-card:active { box-shadow: #0000 0px 5px 15px, inset #0004 0px 0px 15px; @@ -800,10 +809,10 @@ img.favicon { .ms-Button--commandBar.active .ms-Button-icon { color: #c7e0f4; } - .btn-group .btn:hover { + .btn-group .btn:hover, .ms-Nav-compositeLink:hover { background-color: #fff1; } - .btn-group .btn:active { + .btn-group .btn:active, .ms-Nav-compositeLink:active { background-color: #fff2; } .settings .loading { diff --git a/src/components/cards/default-card.tsx b/src/components/cards/default-card.tsx index ac9a68c..0d481f6 100644 --- a/src/components/cards/default-card.tsx +++ b/src/components/cards/default-card.tsx @@ -17,7 +17,6 @@ class DefaultCard extends Card { className={this.className()} onClick={this.onClick} onMouseUp={this.onMouseUp} - onMouseDown={event => event.preventDefault()} onKeyDown={this.onKeyDown} data-iid={this.props.item._id} data-is-focusable> diff --git a/src/components/cards/list-card.tsx b/src/components/cards/list-card.tsx index a4cb4b5..3ef1a8c 100644 --- a/src/components/cards/list-card.tsx +++ b/src/components/cards/list-card.tsx @@ -16,7 +16,6 @@ class ListCard extends Card { className={this.className()} onClick={this.onClick} onMouseUp={this.onMouseUp} - onMouseDown={event => event.preventDefault()} onKeyDown={this.onKeyDown} data-iid={this.props.item._id} data-is-focusable> diff --git a/src/components/menu.tsx b/src/components/menu.tsx index 0dcb8e3..c67707b 100644 --- a/src/components/menu.tsx +++ b/src/components/menu.tsx @@ -91,8 +91,10 @@ export class Menu extends React.Component { let [type, index] = item.key.split("-") if (type === "s") { sids = [parseInt(index)] - } else { + } else if (type === "g") { sids = this.props.groups[parseInt(index)].sids + } else { + return } this.props.groupContextMenu(sids, event) } diff --git a/src/components/settings/groups.tsx b/src/components/settings/groups.tsx index 5f4b7e2..147b97c 100644 --- a/src/components/settings/groups.tsx +++ b/src/components/settings/groups.tsx @@ -214,12 +214,13 @@ class GroupsTab extends React.Component { handleInputChange = (event) => { const name: string = event.target.name - this.setState({[name]: event.target.value.trim()}) + this.setState({[name]: event.target.value}) } createGroup = (event: React.FormEvent) => { event.preventDefault() - if (this.state.newGroupName.length > 0) this.props.createGroup(this.state.newGroupName) + let trimmed = this.state.newGroupName.trim() + if (trimmed.length > 0) this.props.createGroup(trimmed) } addToGroup = () => { @@ -239,7 +240,7 @@ class GroupsTab extends React.Component { updateGroupName = () => { let group = this.state.selectedGroup - group = { ...group, name: this.state.editGroupName } + group = { ...group, name: this.state.editGroupName.trim() } this.props.updateGroup(group) } @@ -292,7 +293,7 @@ class GroupsTab extends React.Component { @@ -325,7 +326,7 @@ class GroupsTab extends React.Component { diff --git a/src/components/settings/sources.tsx b/src/components/settings/sources.tsx index 76a11e9..ac60248 100644 --- a/src/components/settings/sources.tsx +++ b/src/components/settings/sources.tsx @@ -101,12 +101,13 @@ class SourcesTab extends React.Component { handleInputChange = (event) => { const name: string = event.target.name - this.setState({[name]: event.target.value.trim()}) + this.setState({[name]: event.target.value}) } addSource = (event: React.FormEvent) => { event.preventDefault() - if (urlTest(this.state.newUrl)) this.props.addSource(this.state.newUrl) + let trimmed = this.state.newUrl.trim() + if (urlTest(trimmed)) this.props.addSource(trimmed) } onOpenTargetChange = (_, option: IChoiceGroupOption) => { @@ -142,7 +143,7 @@ class SourcesTab extends React.Component { @@ -171,8 +172,8 @@ class SourcesTab extends React.Component { this.props.updateSourceName(this.state.selectedSource, this.state.newSourceName)} + disabled={this.state.newSourceName.trim().length == 0} + onClick={() => this.props.updateSourceName(this.state.selectedSource, this.state.newSourceName.trim())} text={intl.get("sources.editName")} />