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

Refactor and extract panel pattern

parent ab363d7f
...@@ -99,51 +99,53 @@ function HelpPanel({ auth, session }) { ...@@ -99,51 +99,53 @@ function HelpPanel({ auth, session }) {
panelName={uiConstants.PANEL_HELP} panelName={uiConstants.PANEL_HELP}
onActiveChanged={onActiveChanged} onActiveChanged={onActiveChanged}
> >
<div className="u-layout-row"> <div className="help-panel__content">
<h3 className="help-panel__sub-panel-title"> <div className="help-panel__subtitle">
{subPanelTitles[activeSubPanel]} <h3 className="help-panel__sub-panel-title">
</h3> {subPanelTitles[activeSubPanel]}
<div className="help-panel__footer"> </h3>
<div className="help-panel__navigation">
{activeSubPanel === 'versionInfo' && (
<button
className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'tutorial')}
aria-label="Show tutorial panel"
>
Getting started
<SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</button>
)}
{activeSubPanel === 'tutorial' && (
<button
className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'versionInfo')}
aria-label="Show version information panel"
>
About this version
<SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</button>
)}
</div>
</div>
<div className="help-panel__subcontent">
{activeSubPanel === 'tutorial' && <Tutorial />}
{activeSubPanel === 'versionInfo' && ( {activeSubPanel === 'versionInfo' && (
<button <VersionInfo versionData={versionData} />
className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'tutorial')}
aria-label="Show tutorial panel"
>
Getting started
<SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</button>
)}
{activeSubPanel === 'tutorial' && (
<button
className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'versionInfo')}
aria-label="Show version information panel"
>
About this version
<SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</button>
)} )}
</div> </div>
</div> <div className="help-panel-tabs">
<div className="help-panel__content"> <HelpPanelTab
{activeSubPanel === 'tutorial' && <Tutorial />} linkText="Help topics"
{activeSubPanel === 'versionInfo' && ( url="https://web.hypothes.is/help/"
<VersionInfo versionData={versionData} /> />
)} <HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
</div> </div>
<div className="help-panel-tabs">
<HelpPanelTab
linkText="Help topics"
url="https://web.hypothes.is/help/"
/>
<HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
</div> </div>
</SidebarPanel> </SidebarPanel>
); );
......
@use "../variables" as var; @use "../variables" as var;
@use "./buttons";
@use "./layout"; @use "./layout";
@use "./utils"; @use "./utils";
...@@ -90,3 +91,80 @@ ...@@ -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/buttons';
@use '../../mixins/layout'; @use '../../mixins/layout';
@use '../../mixins/panel'; @use '../../mixins/molecules';
@use "../../mixins/utils"; @use "../../mixins/utils";
@use "../../variables" as var; @use "../../variables" as var;
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
} }
.annotation-share-panel { .annotation-share-panel {
@include panel.panel--compact; @include molecules.panel--compact;
position: absolute; position: absolute;
right: 5px; right: 5px;
bottom: 32px; bottom: 32px;
...@@ -38,12 +38,14 @@ ...@@ -38,12 +38,14 @@
} }
&__arrow { &__arrow {
margin: 0;
color: var.$grey-3; color: var.$grey-3;
fill: white; fill: white;
transform: rotateX(180deg); transform: rotateX(180deg);
position: absolute; position: absolute;
z-index: 100; z-index: 100;
right: 0px; right: 0px;
bottom: -8px;
} }
.share-links__icon { .share-links__icon {
......
...@@ -4,17 +4,24 @@ ...@@ -4,17 +4,24 @@
@use "../../variables" as var; @use "../../variables" as var;
.help-panel { .help-panel {
&__content {
@include layout.vertical_rhythm;
}
&__subtitle {
@include layout.row($justify: right, $align: center);
}
&__sub-panel-title { &__sub-panel-title {
@include var.font-big; @include var.font-big;
margin: 0; flex-grow: 1;
padding: 0.5em 0;
font-weight: 500; font-weight: 500;
} }
&__content { &__subcontent {
@include utils.border-top; @include utils.border-top;
@include utils.border-bottom; @include utils.border-bottom;
padding: 0.5em; padding: 0.5em 0;
a { a {
text-decoration: underline; text-decoration: underline;
...@@ -25,13 +32,6 @@ ...@@ -25,13 +32,6 @@
@include utils.icon--xsmall; @include utils.icon--xsmall;
} }
&__footer {
padding: 0.5em 0;
margin-left: auto;
display: flex;
align-items: center;
}
&__sub-panel-link { &__sub-panel-link {
@include buttons.reset-native-btn-styles; @include buttons.reset-native-btn-styles;
@include layout.row($align: center); @include layout.row($align: center);
...@@ -51,8 +51,7 @@ ...@@ -51,8 +51,7 @@
&__tab { &__tab {
@include var.font-big; @include var.font-big;
@include utils.border-right; @include utils.border-right;
flex: 1 1 0px; flex: 1 1;
margin-top: 0.5em;
text-align: center; text-align: center;
color: var.$color-text-light; color: var.$color-text-light;
......
@use "../../mixins/panel"; @use "../../mixins/molecules";
@use "../../variables" as var; @use "../../variables" as var;
.sidebar-content-error { .sidebar-content-error {
@include panel.panel; @include molecules.panel;
position: relative; position: relative;
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
@use "../../mixins/panel"; @use "../../mixins/molecules";
.sidebar-panel { .sidebar-panel {
@include panel.panel; @include molecules.panel;
position: relative; position: relative;
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
@use "../../variables" as var; @use "../../variables" as var;
@use "../../mixins/layout";
@use "../../mixins/molecules";
@use "../../mixins/utils";
.thread-card { .thread-card {
padding: 1em; @include molecules.card;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
cursor: pointer; 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/layout";
@use "../mixins/responsive"; @use "../mixins/responsive";
@use "../../variables" as var; @use "../../variables" as var;
...@@ -36,12 +36,10 @@ ...@@ -36,12 +36,10 @@
} }
.toast-message { .toast-message {
@include panel.panel; @include molecules.card-frame;
@include layout.row; @include layout.row($align: center);
position: relative; position: relative;
width: 100%; width: 100%;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
border-radius: 2px;
margin-bottom: 0.75em; margin-bottom: 0.75em;
&--success { &--success {
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
.tutorial { .tutorial {
&__list { &__list {
margin-top: 0em;
padding-left: 2em; 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