mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Tab bar: Improve tab close button

Browse source
This commit is contained in:
Martynas Bagdonas 2020-12-22 13:05:00 +02:00 • committed by Dan Stillman
parent f440b52aa5
commit c6a196b999
4 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
chrome/content/zotero/components/icons.jsx
View file

@ -55,4 +55,5 @@ function i(name, svgOrSrc, hasDPI=true) {
i('TagSelectorMenu', "chrome://zotero/skin/tag-selector-menu.png") i('TagSelectorMenu', "chrome://zotero/skin/tag-selector-menu.png")
i('DownChevron', "chrome://zotero/skin/searchbar-dropmarker.png") i('DownChevron', "chrome://zotero/skin/searchbar-dropmarker.png")
i('Xmark', "chrome://zotero/skin/xmark.png")

6
chrome/content/zotero/components/tabBar.jsx
View file

@ -27,6 +27,7 @@
import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react'; import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
import cx from 'classnames'; import cx from 'classnames';
const { IconXmark } = require('./icons');
const TabBar = forwardRef(function (props, ref) { const TabBar = forwardRef(function (props, ref) {
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
@ -44,6 +45,9 @@ const TabBar = forwardRef(function (props, ref) {
useImperativeHandle(ref, () => ({ setTabs })); useImperativeHandle(ref, () => ({ setTabs }));
function handleMouseDown(event, id, index) { function handleMouseDown(event, id, index) {
if (event.target.closest('.tab-close')) {
return;
}
if (index != 0) { if (index != 0) {
draggingID.current = id; draggingID.current = id;
} }
@ -109,7 +113,7 @@ const TabBar = forwardRef(function (props, ref) {
className="tab-close" className="tab-close"
onClick={(event) => handleTabClose(event, id)} onClick={(event) => handleTabClose(event, id)}
> >
x <IconXmark/>
</div> </div>
</div> </div>
); );

2
chrome/content/zotero/standalone/standalone.xul
View file

@ -416,7 +416,7 @@
</toolbaritem> </toolbaritem>
</toolbar> </toolbar>
</toolbox> </toolbox>
<vbox id="tab-bar-container"/> <div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container"/>
<!--<toolbarpalette/> <!--<toolbarpalette/>
<toolbar id="nav-bar" class="toolbar-primary chromeclass-toolbar" <toolbar id="nav-bar" class="toolbar-primary chromeclass-toolbar"

24
scss/components/_tabBar.scss
View file

@ -24,6 +24,7 @@
} }
.tab { .tab {
box-sizing: border-box;
-moz-appearance: none; -moz-appearance: none;
max-width: 200px; max-width: 200px;
flex: 1 1 200px; flex: 1 1 200px;
@ -51,23 +52,30 @@
display: -moz-box; display: -moz-box;
position: relative; position: relative;
top: -2px; top: -2px;
overflow-y: hidden;
} }
.tab-close { .tab-close {
position: absolute; position: absolute;
left: 6px; right: 6px;
top: 7px; top: 6px;
width: 16px; width: 16px;
height: 16px; height: 16px;
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
font-size: 14px; border-radius: 3px;
margin-top: -2px;
display: none; &:hover {
background-color: rgba(0, 0, 0, 0.08);
}
&:active {
background-color: rgba(0, 0, 0, 0.16);
}
} }
&:hover:not(:first-child) .tab-close { &:first-child .tab-close {
display: block; display: none;
} }
&:not(.selected) { &:not(.selected) {