Skip to content

feat: implements dropdown menu for changing docs version. #1376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Trancever merged 2 commits into from
Oct 16, 2019
Merged

feat: implements dropdown menu for changing docs version. #1376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3c687b
feat: add menu for switching version in docs
Trancever Oct 9, 2019
6e36d04
feat: improve accessibility
Trancever Oct 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions docs/assets/version.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
/* eslint-disable strict, no-var, vars-on-top, prefer-template */

'use strict';

const url = window.location.pathname;

function createUrlForVersion(version) {
return url.replace(/react-native-paper\//, `react-native-paper/${version}/`);
}

function appendVersionBanner() {
const html = `
<style>
.banner {
margin: 0;
padding: 12px;
margin: 24px;
border-radius: 3px;
text-align: center;
background-color: #f8f9fa;
margin-right: 70px;

@media (max-width: 640px) {
margin-top: 72px;
}
}

.menu-button {
position: relative;
font-size: 14px;
padding: 3px 4px 4px 4px;
margin-left: 2px;
border-radius: 4px;
color: #6200ee;
transition: background-color 200ms;
border: 1px solid #6200ee;
display: inline-block;
cursor: default;
}

.menu-button:hover {
background-color: #efefef;
}

.menu-button:focus {
outline-offset: -3px;
}

.menu-button:focus > ul {
opacity: 1;
pointer-events: auto;
}

.menu-wrapper {
position: relative;
display: inline-block;
width: 0;
height: 0;
}

.list {
min-width: 110px;
display: flex;
position: absolute;
z-index: 2;
margin: 0;
padding: 0;
left: 0;
top: 30px;
list-style: none;
flex-direction: column;
background-color: #f8f9fa;
box-shadow: 0px 2px 5px -1px #dedede;
border-radius: 5px;
overflow: hidden;
opacity: 0;
transition: opacity 150ms;
pointer-events: none;
}

.list:focus-within {
opacity: 1;
pointer-events: auto;
}

.list:hover {
opacity: 1;
}

.list-item {
flex: 1;
margin: 0;
box-shadow: inset 0 1px 0 0 #efefef;
text-align: left;
display: flex;
}

.link {
flex: 1;
padding: 10px 5px;
transition: background-color 250ms;
}

.link:hover {
background-color: #efefef;
}

.link:focus {
background-color: #efefef;
outline-offset: -3px;
outline-width: 3px;
}
</style>
<div class="banner">
Looking for the documentation for previous version? You can find it
<div tabindex="0" class="menu-button" role="button" aria-haspopup="true">
here
<ul class="list" role="menu">
<li class="list-item">
<a class="link" href="${createUrlForVersion(
'1.0'
)}" role="menuitem">v1.x</a>
</li>
<li class="list-item">
<a class="link" href="${createUrlForVersion(
'2.0'
)}" role="menuitem">v2.x</a>
</li>
</ul>
</div>
</div>
`;

if (document.getElementById('version-banner')) return;

const div = document.createElement('div');
div.innerHTML = html;
div.id = 'version-banner';

const root = document.getElementById('root');

if (root) {
if (root.childNodes.length === 1) {
const wrappingDiv = root.childNodes[0];
if (wrappingDiv.childNodes.length === 2) {
const targetDiv = wrappingDiv.childNodes[1];
targetDiv.insertBefore(div, targetDiv.childNodes[0]);
}
}
}
}

appendVersionBanner();

var mutationObserver = new MutationObserver(mutations => {
mutations.forEach(appendVersionBanner);
});

mutationObserver.observe(document.documentElement, {
childList: true,
subtree: true,
});
5 changes: 4 additions & 1 deletion docs/component-docs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ const assets = [
path.join(__dirname, 'assets', 'images'),
];
const styles = [path.join(__dirname, 'assets', 'styles.css')];
const scripts = [path.join(__dirname, 'assets', 'snack.js')];
const scripts = [
path.join(__dirname, 'assets', 'snack.js'),
path.join(__dirname, 'assets', 'version.js'),
];
const github = 'https://github.com/callstack/react-native-paper/edit/master/';

if (!fs.existsSync(dist)) {
Expand Down
17 changes: 0 additions & 17 deletions docs/pages/src/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@ export default class Home extends React.Component<{}> {
const { isDark } = this.state;
return (
<Container>
<Banner>
Looking for the documentation for version 1.0? You can find it{' '}
<a href="1.0">here</a>.
</Banner>
<Content>
<h1>
Cross-platform{' '}
Expand Down Expand Up @@ -96,19 +92,6 @@ export default class Home extends React.Component<{}> {
const PRIMARY_COLOR = '#6200ee';
const RESTING_SHADOW = '0 1px 3px rgba(0, 0, 0, 0.12)';

const Banner = styled.p`
margin: 0;
padding: 12px;
margin: 24px;
border-radius: 3px;
text-align: center;
background-color: #f8f9fa;

@media (max-width: 640px) {
margin-top: 72px;
}
`;

const Highlighted = styled.a`
color: ${PRIMARY_COLOR};

Expand Down
118 changes: 63 additions & 55 deletions docs/pages/src/Showcase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,66 +41,74 @@ const data: Data[] = [
export default class Showcase extends React.Component<{}> {
render() {
return (
<Content>
<h1>Who&apos;s using Paper?</h1>
<p>
Check out these apps built using Paper. Send us a{' '}
<a
href="https://github.com/callstack/react-native-paper/pulls"
target="_blank"
rel="noopener noreferrer"
>
pull request
</a>{' '}
to add your app to this list.
</p>
<Gallery>
{data.map(item => {
const tintColor = color(item.color).isLight()
? '#000000'
: '#FFFFFF';
return (
<div key={item.image}>
<ImageContainer>
<Image src={item.image} alt="" />
<Info style={{ backgroundColor: item.color }}>
<AppName
style={{
color: tintColor,
}}
>
{item.name}
</AppName>
<BadgeContainer>
<a
href={item.android || null}
target="_blank"
rel="noopener noreferrer"
style={{ opacity: item.android ? 1 : 0.4 }}
<Container>
<Content>
<h1>Who&apos;s using Paper?</h1>
<p>
Check out these apps built using Paper. Send us a{' '}
<a
href="https://github.com/callstack/react-native-paper/pulls"
target="_blank"
rel="noopener noreferrer"
>
pull request
</a>{' '}
to add your app to this list.
</p>
<Gallery>
{data.map(item => {
const tintColor = color(item.color).isLight()
? '#000000'
: '#FFFFFF';
return (
<div key={item.image}>
<ImageContainer>
<Image src={item.image} alt="" />
<Info style={{ backgroundColor: item.color }}>
<AppName
style={{
color: tintColor,
}}
>
<GooglePlayIcon color={tintColor} />
</a>
<Separation />
<a
href={item.ios || null}
target="_blank"
rel="noopener noreferrer"
style={{ opacity: item.ios ? 1 : 0.4 }}
>
<IphoneIcon color={tintColor} />
</a>
</BadgeContainer>
</Info>
</ImageContainer>
</div>
);
})}
</Gallery>
</Content>
{item.name}
</AppName>
<BadgeContainer>
<a
href={item.android || null}
target="_blank"
rel="noopener noreferrer"
style={{ opacity: item.android ? 1 : 0.4 }}
>
<GooglePlayIcon color={tintColor} />
</a>
<Separation />
<a
href={item.ios || null}
target="_blank"
rel="noopener noreferrer"
style={{ opacity: item.ios ? 1 : 0.4 }}
>
<IphoneIcon color={tintColor} />
</a>
</BadgeContainer>
</Info>
</ImageContainer>
</div>
);
})}
</Gallery>
</Content>
</Container>
);
}
}

const Container = styled.div`
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
`;

const AppName = styled.h3`
font-size: 16px;
margin-top: 0;
Expand Down