Commit 21f8fb57 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Refactor and extract panel pattern

parent ab363d7f
......@@ -99,11 +99,12 @@ function HelpPanel({ auth, session }) {
panelName={uiConstants.PANEL_HELP}
onActiveChanged={onActiveChanged}
>
<div className="u-layout-row">
<div className="help-panel__content">
<div className="help-panel__subtitle">
<h3 className="help-panel__sub-panel-title">
{subPanelTitles[activeSubPanel]}
</h3>
<div className="help-panel__footer">
<div className="help-panel__navigation">
{activeSubPanel === 'versionInfo' && (
<button
className="help-panel__sub-panel-link"
......@@ -132,7 +133,7 @@ function HelpPanel({ auth, session }) {
)}
</div>
</div>
<div className="help-panel__content">
<div className="help-panel__subcontent">
{activeSubPanel === 'tutorial' && <Tutorial />}
{activeSubPanel === 'versionInfo' && (
<VersionInfo versionData={versionData} />
......@@ -145,6 +146,7 @@ function HelpPanel({ auth, session }) {
/>
<HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
</div>
</div>
</SidebarPanel>
);
}
......
@use "../variables" as var;
@use "./buttons";
@use "./layout";
@use "./utils";
......@@ -90,3 +91,80 @@
);
}
}
/**
* Base styles for a "panel"-like element, with appropriate
* padding, heading and close-button styles.
*/
@mixin panel {
@include card;
&__header {
@include layout.row($align: center);
@include utils.border-bottom;
padding-bottom: 1em;
}
&__header-icon {
margin-right: 0.5em;
}
&__title {
@include var.font-big;
color: var.$color-brand;
font-weight: 700;
}
&__button {
@include buttons.button--labeled;
}
&__button--primary {
@include buttons.button--primary;
}
&__actions {
@include layout.row(right);
@include layout.horizontal-rhythm(10px);
}
}
/**
* `panel` with tighter margins and padding, for use in more confined spaces
*/
@mixin panel--compact {
@include panel;
padding: 0.75em;
&__header {
padding: 0;
border-bottom: none;
}
}
/**
* Styled external-linked "tabs" with icons, intended for use in a panel
*/
@mixin panel-tabs {
@include layout.row($align: center);
&__tab {
@include utils.font-large;
@include utils.border-right;
flex: 1 1;
text-align: center;
color: var.$color-text-light;
&:last-of-type {
border-right: none;
}
}
&__link {
color: var.$color-text-light;
}
&__icon {
@include utils.icon--xsmall;
}
}
@use "../variables" as var;
@use "./buttons";
@use "./layout";
@use "./utils";
/**
* Base styles for a "panel"-like element, with appropriate
* padding, heading and close-button styles.
*/
@mixin panel {
@include utils.border;
background-color: var.$color-background;
border-radius: 2px;
&__header {
@include layout.row($align: center);
@include utils.border-bottom;
padding: 1em 0;
margin: 0 1em;
}
&__header-icon {
margin-right: 0.5em;
}
&__title {
@include var.font-big;
color: var.$color-brand;
font-weight: 700;
}
&__content {
margin: 1em;
margin-top: 0;
}
&__button {
@include buttons.button--labeled;
margin-left: 1em;
}
&__button--primary {
@include buttons.button--primary;
margin-left: 1em;
}
&__actions {
display: flex;
justify-content: flex-end;
}
}
/**
* `panel` with tighter margins and padding, for use in more confined spaces
*/
@mixin panel--compact {
@include panel;
&__header {
padding: 0.75em 0;
margin: 0 0.75em;
border-bottom: none;
}
&__content {
margin: 0.75em;
margin-top: 0;
}
}
@use '../../mixins/buttons';
@use '../../mixins/layout';
@use '../../mixins/panel';
@use '../../mixins/molecules';
@use "../../mixins/utils";
@use "../../variables" as var;
......@@ -9,7 +9,7 @@
}
.annotation-share-panel {
@include panel.panel--compact;
@include molecules.panel--compact;
position: absolute;
right: 5px;
bottom: 32px;
......@@ -38,12 +38,14 @@
}
&__arrow {
margin: 0;
color: var.$grey-3;
fill: white;
transform: rotateX(180deg);
position: absolute;
z-index: 100;
right: 0px;
bottom: -8px;
}
.share-links__icon {
......
......@@ -4,17 +4,24 @@
@use "../../variables" as var;
.help-panel {
&__content {
@include layout.vertical_rhythm;
}
&__subtitle {
@include layout.row($justify: right, $align: center);
}
&__sub-panel-title {
@include var.font-big;
margin: 0;
padding: 0.5em 0;
flex-grow: 1;
font-weight: 500;
}
&__content {
&__subcontent {
@include utils.border-top;
@include utils.border-bottom;
padding: 0.5em;
padding: 0.5em 0;
a {
text-decoration: underline;
......@@ -25,13 +32,6 @@
@include utils.icon--xsmall;
}
&__footer {
padding: 0.5em 0;
margin-left: auto;
display: flex;
align-items: center;
}
&__sub-panel-link {
@include buttons.reset-native-btn-styles;
@include layout.row($align: center);
......@@ -51,8 +51,7 @@
&__tab {
@include var.font-big;
@include utils.border-right;
flex: 1 1 0px;
margin-top: 0.5em;
flex: 1 1;
text-align: center;
color: var.$color-text-light;
......
@use "../../mixins/panel";
@use "../../mixins/molecules";
@use "../../variables" as var;
.sidebar-content-error {
@include panel.panel;
@include molecules.panel;
position: relative;
margin-bottom: 0.75em;
}
@use "../../mixins/panel";
@use "../../mixins/molecules";
.sidebar-panel {
@include panel.panel;
@include molecules.panel;
position: relative;
margin-bottom: 0.75em;
}
@use "../../variables" as var;
@use "../../mixins/layout";
@use "../../mixins/molecules";
@use "../../mixins/utils";
.thread-card {
padding: 1em;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
@include molecules.card;
cursor: pointer;
background-color: var.$white;
&.is-focused {
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
}
&--theme-clean {
// Give a little more space so that the border appears centered
// between cards
padding-bottom: 1.5em;
border-bottom: 1px solid var.$grey-2;
box-shadow: none;
&:hover {
box-shadow: none;
}
}
}
@use "../../mixins/panel";
@use "../../mixins/molecules";
@use "../../mixins/layout";
@use "../mixins/responsive";
@use "../../variables" as var;
......@@ -36,12 +36,10 @@
}
.toast-message {
@include panel.panel;
@include layout.row;
@include molecules.card-frame;
@include layout.row($align: center);
position: relative;
width: 100%;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
border-radius: 2px;
margin-bottom: 0.75em;
&--success {
......
......@@ -3,7 +3,6 @@
.tutorial {
&__list {
margin-top: 0em;
padding-left: 2em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment