Skip to content

Commit 9988935

Browse files
lxieyanglxieyang
committed
new pinned tabs style
1 parent 019f911 commit 9988935

File tree

4 files changed

+162
-122
lines changed

4 files changed

+162
-122
lines changed

‎src/pages/Sidebar/containers/TabsList/Tab/Tab.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
display: flex;
44
position: relative;
55

6-
/* padding: 0px 4px; */
7-
margin-top: 1px;
6+
padding: 0px 4px;
7+
margin-top: 2px;
88
box-sizing: border-box;
99
}
1010

@@ -14,18 +14,22 @@
1414
/* width: 100%; */
1515
display: flex;
1616
align-items: center;
17-
padding: 8px 8px 8px 10px;
17+
padding: 6px 6px 6px 8px;
1818
cursor: default;
1919
color: rgb(60, 64, 67);
2020
/* border-top-left-radius: 8px;
2121
border-top-right-radius: 8px; */
22-
/* border-radius: 6px; */
22+
border-radius: 4px;
2323

2424
transition: all 0.1s ease-in;
2525

2626
position: relative;
2727
}
2828

29+
.TabContainer.isPinned {
30+
padding: 8px;
31+
}
32+
2933
.TabContainer.Dark {
3034
color: rgb(190, 193, 198);
3135
}
@@ -74,6 +78,10 @@
7478
align-items: center;
7579
}
7680

81+
.TabContainer.isPinned .TabFaviconContainer {
82+
margin-right: 0px;
83+
}
84+
7785
.TabTitleContainer {
7886
flex: 1;
7987
min-width: 0;

‎src/pages/Sidebar/containers/TabsList/Tab/Tab.jsx‎

Lines changed: 72 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ const Tab = ({
159159
<li
160160
// style={{ opacity: isDragging ? 0 : 1 }}
161161
ref={ref}
162+
title={`${title}\n\n${url}`}
162163
className={classNames({
163164
TabItem: true,
164165
blink: isDragging,
@@ -172,6 +173,7 @@ const Tab = ({
172173
}}
173174
onMouseOver={() => {
174175
if (!isDragging && isHovering) {
176+
console.log(isHovering);
175177
if (index === activeTab.index) {
176178
chrome.tabs.highlight({ tabs: [activeTab.index] }, null);
177179
} else {
@@ -193,24 +195,14 @@ const Tab = ({
193195
<div
194196
className={classNames({
195197
TabContainer: true,
198+
isPinned: pinned,
196199
Dark: isDark,
197200
ActiveTabContainer: active,
198201
InactiveTabContainerHovering:
199202
(!active && isHovering && idx === index) ||
200203
(!active && isHovering && isSearching),
201204
})}
202205
>
203-
{pinned && (
204-
<div className="PinnedIconContainer">
205-
<FaThumbtack
206-
className={classNames({
207-
PinnedIcon: true,
208-
Dark: isDark,
209-
})}
210-
/>
211-
</div>
212-
)}
213-
214206
<div className="TabFaviconContainer">
215207
{status === 'loading' ? (
216208
<Loader
@@ -228,77 +220,81 @@ const Tab = ({
228220
)}
229221
</div>
230222

231-
<div
232-
className="TabTitleContainer"
233-
title={displayTabInFull ? url : `${title}\n\n${url}`}
234-
>
235-
<div
236-
className={classNames({
237-
TabTitle: true,
238-
Truncated: !displayTabInFull,
239-
})}
240-
>
241-
{title}
242-
</div>
243-
{mutedInfo.muted && audible && (
244-
<div
245-
className={classNames({
246-
MutedIconContainer: true,
247-
Dark: isDark,
248-
})}
249-
onClick={(e) => muteTabClickedHandler(e, id)}
250-
>
251-
<MdVolumeOff size={'16px'} />
223+
{!pinned && (
224+
<>
225+
<div className="TabTitleContainer">
226+
<div
227+
className={classNames({
228+
TabTitle: true,
229+
Truncated: !displayTabInFull,
230+
})}
231+
>
232+
{title}
233+
</div>
234+
{mutedInfo.muted && audible && (
235+
<div
236+
className={classNames({
237+
MutedIconContainer: true,
238+
Dark: isDark,
239+
})}
240+
onClick={(e) => muteTabClickedHandler(e, id)}
241+
>
242+
<MdVolumeOff size={'16px'} />
243+
</div>
244+
)}
245+
{!mutedInfo.muted && audible && (
246+
<div
247+
className={classNames({
248+
MutedIconContainer: true,
249+
Dark: isDark,
250+
})}
251+
onClick={(e) => muteTabClickedHandler(e, id)}
252+
>
253+
<MdVolumeUp size={'16px'} />
254+
</div>
255+
)}
252256
</div>
253-
)}
254-
{!mutedInfo.muted && audible && (
257+
255258
<div
256-
className={classNames({
257-
MutedIconContainer: true,
258-
Dark: isDark,
259-
})}
260-
onClick={(e) => muteTabClickedHandler(e, id)}
259+
title="Reload tab"
260+
className="TabItemActionButtonContainer"
261+
style={{
262+
opacity:
263+
(isHovering && idx === index) ||
264+
(isSearching && isHovering)
265+
? 1
266+
: 0,
267+
}}
261268
>
262-
<MdVolumeUp size={'16px'} />
269+
<div
270+
className={classNames({
271+
TabItemActionButton: true,
272+
Dark: isDark,
273+
})}
274+
onClick={(e) => reloadTabClickedHandler(e, id)}
275+
>
276+
<MdRefresh size={'16px'} />
277+
</div>
263278
</div>
264-
)}
265-
</div>
266-
267-
<div
268-
title="Reload tab"
269-
className="TabItemActionButtonContainer"
270-
style={{
271-
opacity:
272-
(isHovering && idx === index) ||
273-
(isSearching && isHovering)
274-
? 1
275-
: 0,
276-
}}
277-
>
278-
<div
279-
className={classNames({
280-
TabItemActionButton: true,
281-
Dark: isDark,
282-
})}
283-
onClick={(e) => reloadTabClickedHandler(e, id)}
284-
>
285-
<MdRefresh size={'16px'} />
286-
</div>
287-
</div>
288279

289-
<div className="TabItemActionButtonSpaceBetween"></div>
280+
<div className="TabItemActionButtonSpaceBetween"></div>
290281

291-
<div title="Close tab" className="TabItemActionButtonContainer">
292-
<div
293-
className={classNames({
294-
TabItemActionButton: true,
295-
Dark: isDark,
296-
})}
297-
onClick={(e) => closeTabClickedHandler(e, id)}
298-
>
299-
<MdClose size={'16px'} />
300-
</div>
301-
</div>
282+
<div
283+
title="Close tab"
284+
className="TabItemActionButtonContainer"
285+
>
286+
<div
287+
className={classNames({
288+
TabItemActionButton: true,
289+
Dark: isDark,
290+
})}
291+
onClick={(e) => closeTabClickedHandler(e, id)}
292+
>
293+
<MdClose size={'16px'} />
294+
</div>
295+
</div>
296+
</>
297+
)}
302298
</div>
303299
</li>
304300
</ContextMenuTrigger>

‎src/pages/Sidebar/containers/TabsList/TabsList.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,18 @@
3434
.NewTabButton.Dark:hover {
3535
background-color: rgb(68, 69, 71);
3636
}
37+
38+
.PinnedUnpinnedDivider {
39+
width: 100%;
40+
height: 0.5px;
41+
background-color: #999;
42+
margin-top: 2px;
43+
margin-bottom: 2px;
44+
}
45+
46+
.PinnedTabsContainer {
47+
width: 100%;
48+
display: flex;
49+
align-items: center;
50+
flex-wrap: wrap;
51+
}

‎src/pages/Sidebar/containers/TabsList/TabsList.jsx‎

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -73,20 +73,40 @@ class TabsList extends Component {
7373
chrome.tabs.create({});
7474
};
7575

76+
renderTab = (tabOrder, idx) => {
77+
return (
78+
<Tab
79+
key={tabOrder.id}
80+
idx={idx}
81+
id={tabOrder.id}
82+
index={tabOrder.index}
83+
active={tabOrder.active}
84+
pinned={tabOrder.pinned}
85+
mutedInfo={tabOrder.mutedInfo}
86+
openerTabId={tabOrder.openerTabId}
87+
audible={tabOrder.audible}
88+
faviconUrl={tabOrder.faviconUrl}
89+
title={tabOrder.title}
90+
url={tabOrder.url}
91+
status={tabOrder.status}
92+
activeTab={this.props.activeTab}
93+
displayTabInFull={this.props.displayTabInFull}
94+
contextMenuShow={this.state.contextMenuShow}
95+
contextMenuShowPrev={this.state.contextMenuShowPrev}
96+
moveTab={this.props.moveTab}
97+
setTabAsLoading={this.props.setTabAsLoading}
98+
clearSearchBoxInputText={this.clearSearchBoxInputText}
99+
isSearching={this.state.searchBarInputText.length > 0}
100+
setContextMenuShow={this.setContextMenuShow}
101+
clearContextMenuShow={this.clearContextMenuShow}
102+
openNewTabClickedHandler={this.openNewTabClickedHandler}
103+
/>
104+
);
105+
};
106+
76107
render() {
77-
const {
78-
tabOrders,
79-
activeTab,
80-
tabsDict,
81-
moveTab,
82-
setTabAsLoading,
83-
displayTabInFull,
84-
} = this.props;
85-
const {
86-
searchBarInputText,
87-
contextMenuShow,
88-
contextMenuShowPrev,
89-
} = this.state;
108+
const { tabOrders, tabsDict } = this.props;
109+
const { searchBarInputText } = this.state;
90110

91111
const inputText = searchBarInputText.toLowerCase();
92112

@@ -110,6 +130,9 @@ class TabsList extends Component {
110130
this.firstTab = null;
111131
}
112132

133+
const pinnedTabs = tabOrdersCopy.filter((item) => item.pinned);
134+
const unpinnedTabs = tabOrdersCopy.filter((item) => !item.pinned);
135+
113136
return (
114137
<DarkModeContext.Consumer>
115138
{({ isDark }) => {
@@ -121,40 +144,38 @@ class TabsList extends Component {
121144
searchCount={tabOrdersCopy.length}
122145
/>
123146

124-
<ul style={{ margin: 0, padding: 0 }}>
125-
{tabOrdersCopy.map((tabOrder, idx) => {
147+
<div style={{ margin: 0, padding: 0 }}>
148+
{pinnedTabs.length > 0 && (
149+
<div className="PinnedTabsContainer">
150+
{pinnedTabs.map((tabOrder, idx) => {
151+
if (tabsDict[tabOrder.id] === undefined) {
152+
return null;
153+
}
154+
155+
// let tab = { ...tabsDict[tabOrder.id] };
156+
return (
157+
<React.Fragment key={idx}>
158+
{this.renderTab(tabOrder, idx)}
159+
</React.Fragment>
160+
);
161+
})}
162+
</div>
163+
)}
164+
165+
{pinnedTabs.length > 0 && unpinnedTabs.length > 0 && (
166+
<div className="PinnedUnpinnedDivider"></div>
167+
)}
168+
169+
{unpinnedTabs.map((tabOrder, idx) => {
126170
if (tabsDict[tabOrder.id] === undefined) {
127171
return null;
128172
}
129173

130174
// let tab = { ...tabsDict[tabOrder.id] };
131175
return (
132-
<Tab
133-
key={tabOrder.id}
134-
idx={idx}
135-
id={tabOrder.id}
136-
index={tabOrder.index}
137-
active={tabOrder.active}
138-
pinned={tabOrder.pinned}
139-
mutedInfo={tabOrder.mutedInfo}
140-
openerTabId={tabOrder.openerTabId}
141-
audible={tabOrder.audible}
142-
faviconUrl={tabOrder.faviconUrl}
143-
title={tabOrder.title}
144-
url={tabOrder.url}
145-
status={tabOrder.status}
146-
activeTab={activeTab}
147-
displayTabInFull={displayTabInFull}
148-
contextMenuShow={contextMenuShow}
149-
contextMenuShowPrev={contextMenuShowPrev}
150-
moveTab={moveTab}
151-
setTabAsLoading={setTabAsLoading}
152-
clearSearchBoxInputText={this.clearSearchBoxInputText}
153-
isSearching={searchBarInputText.length > 0}
154-
setContextMenuShow={this.setContextMenuShow}
155-
clearContextMenuShow={this.clearContextMenuShow}
156-
openNewTabClickedHandler={this.openNewTabClickedHandler}
157-
/>
176+
<React.Fragment key={idx}>
177+
{this.renderTab(tabOrder, idx + pinnedTabs.length)}
178+
</React.Fragment>
158179
);
159180
})}
160181

@@ -175,7 +196,7 @@ class TabsList extends Component {
175196
<MdAdd size={'22px'} />
176197
</div>
177198
</li>
178-
</ul>
199+
</div>
179200
</div>
180201
);
181202
}}

0 commit comments

Comments
 (0)