Skip to content

Commit 2de6604

Browse files
FerranMartFerranMart
authored
Improve ThemeList and Portal styles make more visual for users
1 parent c3437c4 commit 2de6604

File tree

6 files changed

+421
-242
lines changed

6 files changed

+421
-242
lines changed

‎components/ThemeList.jsx

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ import LocaleUtils from '../utils/LocaleUtils';
2424
import ThemeUtils from '../utils/ThemeUtils';
2525
import Icon from './Icon';
2626

27-
import './style/ThemeList.css';
27+
import './style/ThemeListPortal.css';
28+
import './style/ThemeListSidebar.css';
2829

2930
class ThemeList extends React.Component {
3031
static propTypes = {
@@ -45,7 +46,8 @@ class ThemeList extends React.Component {
4546
setUserInfoFields: PropTypes.func,
4647
showDefaultThemeSelector: PropTypes.bool,
4748
showLayerAfterChangeTheme: PropTypes.bool,
48-
themes: PropTypes.object
49+
themes: PropTypes.object,
50+
className: PropTypes.string
4951
};
5052
state = {
5153
expandedGroups: [],
@@ -130,22 +132,6 @@ class ThemeList extends React.Component {
130132
onClick={() => this.setTheme(item)}
131133
title={title}
132134
>
133-
<div className="theme-item-title" title={item.title}>
134-
<span>{item.title}</span>
135-
136-
</div>
137-
{!isEmpty(infoLinks) ? (<div className={"theme-item-info-menu " + (this.state.visibleThemeInfoMenu ? "theme-item-info-menu-active" : "")} onClick={ev => this.toggleThemeInfoMenu(ev, item.id)}>
138-
<Icon icon="info" />
139-
{item.themeInfoLinks.title ? (<span>{item.themeInfoLinks.title}</span>) : LocaleUtils.tr(item.themeInfoLinks.titleMsgId)}
140-
<Icon icon="triangle-down" />
141-
{this.state.visibleThemeInfoMenu === item.id ? (
142-
<div className="theme-item-info-links" onClick={ev => ev.stopPropagation()}>
143-
{infoLinks.map(link => (
144-
<a href={link.url} key={link.name} target={link.target}>{link.title}</a>
145-
))}
146-
</div>
147-
) : null}
148-
</div>) : null}
149135
<div className="theme-item-body">
150136
{item.description ? (<div className="theme-item-description" dangerouslySetInnerHTML={{__html: item.description}} />) : null}
151137
<img className="theme-item-thumbnail" src={assetsPath + "/" + item.thumbnail} />
@@ -162,13 +148,22 @@ class ThemeList extends React.Component {
162148
<Icon icon="lock" />
163149
</div>
164150
)}
165-
{isEmpty(matches) ? null : (
166-
<div className="theme-item-filterinfo-overlay">
167-
{matches.map(match => (
168-
<div key={match[0]} title={match[2]}><i>{LocaleUtils.tr(match[0])}:</i><br />{match[1][0]}<b>{match[1][1]}</b>{match[1][2]}</div>
169-
))}
170-
</div>
171-
)}
151+
<div className="theme-item-title" title={item.title}>
152+
<span>{item.title}</span>
153+
154+
</div>
155+
{!isEmpty(infoLinks) ? (<div className={"theme-item-info-menu " + (this.state.visibleThemeInfoMenu ? "theme-item-info-menu-active" : "")} onClick={ev => this.toggleThemeInfoMenu(ev, item.id)}>
156+
<Icon icon="info" />
157+
{item.themeInfoLinks.title ? (<span>{item.themeInfoLinks.title}</span>) : LocaleUtils.tr(item.themeInfoLinks.titleMsgId)}
158+
<Icon icon="triangle-down" />
159+
{this.state.visibleThemeInfoMenu === item.id ? (
160+
<div className="theme-item-info-links" onClick={ev => ev.stopPropagation()}>
161+
{infoLinks.map(link => (
162+
<a href={link.url} key={link.name} target={link.target}>{link.title}</a>
163+
))}
164+
</div>
165+
) : null}
166+
</div>) : null}
172167
</li>
173168
);
174169
})}
@@ -190,9 +185,10 @@ class ThemeList extends React.Component {
190185
return false;
191186
};
192187
render() {
188+
const { className } = this.props;
193189
const filter = this.props.filter ? new RegExp(removeDiacritics(this.props.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
194190
return (
195-
<div className="ThemeList">
191+
<div className={`ThemeList ${className}`}>
196192
{this.renderThemeGroup(this.props.themes, filter)}
197193
</div>
198194
);

‎components/style/ThemeListPortal.css

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
div.ThemeListPortal ul {
2+
padding: 0;
3+
list-style-type: none;
4+
}
5+
6+
div.ThemeListPortal li.theme-group-header > span {
7+
font-weight: bold;
8+
display: flex;
9+
align-items: center;
10+
border-bottom: 1px solid var(--border-color);
11+
padding: 0.25em;
12+
margin: 0 0.5em 0.5em 0.5em;
13+
}
14+
15+
div.ThemeListPortal li.theme-group-header > span > span.icon {
16+
margin-right: 0.25em;
17+
}
18+
19+
div.ThemeListPortal ul.theme-group-body {
20+
padding: 0.25em;
21+
display: flex;
22+
justify-content: center;
23+
flex-direction: column;
24+
align-items: center;
25+
gap: 2.25em;
26+
}
27+
28+
@media screen and (min-width: 426px) {
29+
div.ThemeListPortal ul.theme-group-body {
30+
display: flex;
31+
justify-content: center;
32+
flex-direction: row;
33+
flex-wrap: wrap;
34+
}
35+
}
36+
37+
div.ThemeListPortal li.theme-group-header ul.theme-group-body {
38+
margin-left: 0.25em;
39+
}
40+
41+
div.ThemeListPortal li.theme-item {
42+
font-weight: bold;
43+
font-size: large;
44+
text-align: center;
45+
display: flex;
46+
flex-direction: column;
47+
width: 15em;
48+
border-radius: 1.55em;
49+
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
50+
position: relative;
51+
overflow: hidden;
52+
background-color: white;
53+
border: none;
54+
}
55+
56+
div.ThemeListPortal div.theme-item-title {
57+
display: flex;
58+
align-items: center;
59+
padding: 0.3em 0;
60+
order: 2;
61+
background-color: white;
62+
}
63+
64+
div.ThemeListPortal div.theme-item-title > span:first-child {
65+
flex: 1 1 auto;
66+
padding: 0.125em;
67+
overflow: hidden;
68+
text-overflow: ellipsis;
69+
white-space: nowrap;
70+
}
71+
72+
div.ThemeListPortal div.theme-item-title > span.icon {
73+
flex: 0 0 auto;
74+
padding: 0.125em;
75+
font-size: large;
76+
}
77+
78+
div.ThemeListPortal li.theme-item-active div.theme-item-title > span:first-child {
79+
color: var(--color-active);
80+
}
81+
82+
div.ThemeListPortal img.theme-item-thumbnail {
83+
width: calc(15em - 2px);
84+
height: auto;
85+
border-radius: 1.55em;
86+
order: 1;
87+
}
88+
89+
div.ThemeListPortal div.theme-item-body {
90+
order: 1;
91+
}
92+
93+
div.ThemeListPortal div.theme-item-icons {
94+
position: absolute;
95+
bottom: 0;
96+
right: 0;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
div.ThemeListPortal div.theme-item-icons > span.icon {
102+
flex: 0 0 auto;
103+
font-size: large;
104+
padding: 0.25em;
105+
background-color: var(--button-bg-color);
106+
color: var(--text-color);
107+
z-index: 2;
108+
display: none;
109+
}
110+
111+
div.ThemeListPortal div.theme-item-icons > span.icon:hover {
112+
color: var(--color-active);
113+
}
114+
115+
div.ThemeListPortal li.theme-item:hover div.theme-item-body {
116+
background-color: transparent;
117+
}
118+
div.ThemeListPortal li.theme-item:hover {
119+
background-color: lightgray !important;
120+
border: none !important;
121+
}
122+
div.ThemeListPortal div.theme-item-icons > span.icon-active {
123+
color: var(--color-active);
124+
}
125+
div.ThemeListPortal li.theme-item:hover div.theme-item-title {
126+
background-color: transparent;
127+
}
128+
div.ThemeListPortal div.theme-item-keywords {
129+
position: relative;
130+
display: inline-block;
131+
color: gray;
132+
font-size: x-small;
133+
font-weight: normal;
134+
max-width: 80%;
135+
overflow-x: hidden;
136+
white-space: nowrap;
137+
text-overflow: ellipsis;
138+
}
139+
140+
div.ThemeListPortal li.theme-item-active {
141+
border: none;
142+
}
143+
144+
div.ThemeListPortal div.theme-item-info-menu {
145+
text-align: left;
146+
display: flex;
147+
align-items: center;
148+
position: relative;
149+
color: var(--color-active);
150+
padding: 0.25em;
151+
}
152+
153+
div.ThemeListPortal div.theme-item-info-menu-active {
154+
background-color: var(--color-active);
155+
color: white;
156+
}
157+
158+
div.ThemeListPortal div.theme-item-info-menu > span.icon-info {
159+
margin-right: 0.25em;
160+
}
161+
162+
div.ThemeListPortal div.theme-item-info-menu > span.icon-triangle-down {
163+
margin-left: 0.25em;
164+
font-size: 80%;
165+
}
166+
167+
div.ThemeListPortal div.theme-item-info-links {
168+
position: absolute;
169+
top: 100%;
170+
max-width: calc(15em + 2px);
171+
left: -1px;
172+
right: -1px;
173+
background-color: rgba(255, 255, 255, 0.85);
174+
border: 1px solid var(--color-active);
175+
}
176+
177+
div.ThemeListPortal div.theme-item-info-links > a {
178+
display: block;
179+
text-align: left;
180+
padding: 0.25em;
181+
overflow: hidden;
182+
text-overflow: ellipsis;
183+
white-space: nowrap;
184+
}
185+
186+
div.ThemeListPortal div.theme-item-restricted-overlay {
187+
position: absolute;
188+
left: 0;
189+
right: 0;
190+
top: 0;
191+
bottom: 0;
192+
background-color: rgba(127, 127, 127, 0.5);
193+
display: flex;
194+
align-items: center;
195+
justify-content: center;
196+
font-size: 400%;
197+
}

0 commit comments

Comments
 (0)