PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Collapse DOM around tab label icon

Browse source
This commit is contained in:
Travis Ralston 2019-01-22 09:54:35 -07:00
parent feed17d9ac
commit 0deb210fd8
4 changed files with 25 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
res/css/structures/_TabbedView.scss
View file

@ -38,6 +38,7 @@ limitations under the License.
font-weight: 600;
height: 20px;
margin-bottom: 6px;
position: relative;
}
.mx_TabbedView_tabLabel_active {
@ -50,34 +51,27 @@ limitations under the License.
background-color: orange;
}
.mx_TabbedView_tabLabel_icon {
width: 14px;
height: 14px;
.mx_TabbedView_maskedIcon {;
margin-left: 6px;
margin-right: 9px;
position: relative;
}
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
width: 14px;
height: 14px;
display: inline-block;
}
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
.mx_TabbedView_maskedIcon:before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color;
}

12
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -39,25 +39,25 @@
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
mask: url('$(res)/img/feather-icons/settings.svg');
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
mask: url('$(res)/img/feather-icons/phone.svg');
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
mask: url('$(res)/img/feather-icons/notifications.svg');
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
mask: url('$(res)/img/feather-icons/sliders.svg');
mask-image: url('$(res)/img/feather-icons/sliders.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
mask: url('$(res)/img/feather-icons/lock.svg');
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
mask: url('$(res)/img/feather-icons/help-circle.svg');
mask-image: url('$(res)/img/feather-icons/help-circle.svg');
}

8
src/components/structures/TabbedView.js
View file

@ -26,12 +26,12 @@ export class Tab {
/**
* Creates a new tab.
* @param {string} tabLabel The untranslated tab label.
* @param {string} tabIconJsx The JSX for the tab icon. This should be a plain img element or null.
* @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
* @param {string} tabJsx The JSX for the tab container.
*/
constructor(tabLabel, tabIconJsx, tabJsx) {
constructor(tabLabel, tabIconClass, tabJsx) {
this.label = tabLabel;
this.icon = tabIconJsx;
this.icon = tabIconClass;
this.body = tabJsx;
}
}
@ -78,7 +78,7 @@ export class TabbedView extends React.Component {
let tabIcon = null;
if (tab.icon) {
tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
const onClickHandler = () => this._setActiveTab(tab);

14
src/components/views/dialogs/UserSettingsDialog.js
View file

@ -47,37 +47,37 @@ export default class UserSettingsDialog extends React.Component {
return [
new Tab(
_td("General"),
<span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_settingsIcon",
<GeneralSettingsTab />,
),
new Tab(
_td("Notifications"),
<span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_bellIcon",
<div>Notifications Test</div>,
),
new Tab(
_td("Preferences"),
<span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_preferencesIcon",
<div>Preferences Test</div>,
),
new Tab(
_td("Voice & Video"),
<span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_voiceIcon",
<div>Voice Test</div>,
),
new Tab(
_td("Security & Privacy"),
<span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_securityIcon",
<div>Security Test</div>,
),
new Tab(
_td("Help & About"),
<span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_helpIcon",
<div>Help Test</div>,
),
new Tab(
_td("Visit old settings"),
<span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_helpIcon",
<TempTab onClose={this.props.onFinished} />,
),
];