forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 05:36:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added modal window for server deletion

Browse Source
This commit is contained in:
Alejandro Celaya
2018-07-20 22:14:17 +02:00
parent 0de191ac0b
commit 168b24344e
7 changed files with 120 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/common/AsideMenu.js
View File

@@ -1,45 +1,49 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import { NavLink } from 'react-router-dom';
import DeleteServerButton from '../servers/DeleteServerButton';
import './AsideMenu.scss';
export default function AsideMenu({ selectedServer }) {
const serverId = selectedServer ? selectedServer.id : '';
const isListShortUrlsActive = (match, { pathname }) => {
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
const serverIdFromPathname = pathname.split('/')[2];
return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
};
export default class AsideMenu extends React.Component {
render() {
const { selectedServer, history } = this.props;
const serverId = selectedServer ? selectedServer.id : '';
const isListShortUrlsActive = (match, { pathname }) => {
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
const serverIdFromPathname = pathname.split('/')[2];
return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
};
return (
<aside className="aside-menu col-md-2 col-sm-2">
<nav className="nav flex-column aside-menu__nav">
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive}
>
<FontAwesomeIcon icon={listIcon} />
<span className="aside-menu__item-text">List short URLs</span>
</NavLink>
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`}
>
<FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span>
</NavLink>
<span className="aside-menu__item--divider" />
<span className="aside-menu__item aside-menu__item--danger">
<FontAwesomeIcon icon={deleteIcon} />
<span className="aside-menu__item-text">Delete this server</span>
</span>
</nav>
</aside>
);
return (
<aside className="aside-menu col-md-2 col-sm-2">
<nav className="nav flex-column aside-menu__nav">
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive}
>
<FontAwesomeIcon icon={listIcon} />
<span className="aside-menu__item-text">List short URLs</span>
</NavLink>
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`}
>
<FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span>
</NavLink>
<span className="aside-menu__item--divider" />
<DeleteServerButton
className="aside-menu__item aside-menu__item--danger"
history={history}
server={selectedServer}
/>
</nav>
</aside>
);
}
}

3
src/common/AsideMenu.scss
View File

@@ -1,4 +1,5 @@
@import "../utils/base";
@import "../utils/mixins/border-radius";
.aside-menu {
position: fixed !important;
@@ -44,6 +45,8 @@
.aside-menu__item--danger {
color: $dangerColor;
margin: 0;
@include border-radius(4px);
}
.aside-menu__item--danger:hover {
color: #fff;