IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Browse Source

Making the navbar more configurable.

master
parent
commit
f3b6e9794c
6 changed files with 141 additions and 53 deletions
  1. +14
    -0
      frontend/src/js/component/wb-inline-search.js
  2. +0
    -49
      frontend/src/js/component/wb-navbar.js
  3. +2
    -3
      frontend/src/js/page/wb-app.js
  4. +7
    -1
      frontend/src/js/page/wb-browse.js
  5. +31
    -0
      frontend/src/js/page/wb-sign-in.js
  6. +87
    -0
      frontend/src/js/widget/wb-navbar.js

+ 14
- 0
frontend/src/js/component/wb-inline-search.js View File

@@ -0,0 +1,14 @@
import { h, Component } from 'preact';
class WBInlineSearch extends Component {
render() {
return (
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
);
}
}
export default WBInlineSearch;

+ 0
- 49
frontend/src/js/component/wb-navbar.js View File

@@ -1,49 +0,0 @@
import { h, Component } from 'preact';
class WBNavbar extends Component {
render() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Workbench Advanced</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
);
}
}
export default WBNavbar;

frontend/src/js/component/wb-app.js → frontend/src/js/page/wb-app.js View File

@@ -6,6 +6,7 @@ import WBPagination from 'wb-pagination';
import WBProjectListing from 'wb-project-listing';
import WBNavbar from 'wb-navbar';
import WBBrowse from 'wb-browse';
import WBSignIn from 'wb-sign-in';
class WBApp extends Component {
render({}, { activePage }) {
@@ -15,9 +16,7 @@ class WBApp extends Component {
Hello, world!
</div>
<div path="/login">
<WBNavbar />
</div>
<WBSignIn path="/sign-in" />
<WBBrowse path="/browse/:ownerUuid?" />
</Router>

+ 7
- 1
frontend/src/js/page/wb-browse.js View File

@@ -1,12 +1,18 @@
import { h, Component } from 'preact';
import WBNavbar from 'wb-navbar';
import WBProjectListing from 'wb-project-listing';
import WBInlineSearch from 'wb-inline-search';
class WBBrowse extends Component {
render({ ownerUuid }) {
return (
<div>
<WBNavbar />
<WBNavbar items={ [
{ 'name': 'Browse', 'active': true },
{ 'name': 'User', 'dropdown': [ 'Sign Off' ]}
] } rhs={ (
<WBInlineSearch />
) } />
<WBProjectListing arvHost="api.arkau.roche.com"
arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
ownerUuid={ ownerUuid }


+ 31
- 0
frontend/src/js/page/wb-sign-in.js View File

@@ -0,0 +1,31 @@
import { h, Component } from 'preact';
import WBNavbar from 'wb-navbar';
class WBLogin extends Component {
render() {
return (
<div>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<h1>Sign In</h1>
<form>
<div class="form-group">
<label for="arvHost">Arvados API Host</label>
<input type="text" class="form-control" id="arvHost" placeholder="Enter Arvados API Host" />
</div>
<div class="form-group">
<label for="arvToken">Token</label>
<input type="text" class="form-control" id="arvToken" placeholder="Enter Arvados API Token" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default WBLogin;

+ 87
- 0
frontend/src/js/widget/wb-navbar.js View File

@@ -0,0 +1,87 @@
import { h, Component } from 'preact';
class WBNavbar extends Component {
render({ title, items, rhs, onItemClicked }) {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{ title }</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{ items.map(i => {
if (typeof(i) === 'string')
return (
<li class="nav-item">
<a class="nav-link" href="#">{ i }</a>
</li>
);
else if (typeof(i) === 'object')
var li_cls = ['nav-item'];
if (i['active'])
li_cls.push('active');
var a_cls = ['nav-link'];
if (i['disabled'])
a_cls.push('disabled');
if ('dropdown' in i) {
li_cls.push('dropdown');
a_cls.push('dropdown-toggle');
li_cls = li_cls.join(' ');
a_cls = a_cls.join(' ');
return (
<li class={ li_cls }>
<a class={ a_cls } href="#" id={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">{ i['name'] }</a>
<div class="dropdown-menu" aria-labelledby={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }>
{ i['dropdown'].map(d => {
if (typeof(d) === 'string')
return (
<a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
);
else if (typeof(d) === 'object' && d['divider'])
return (
<div class="dropdown-divider" />
);
}) }
</div>
</li>
);
} else {
li_cls = li_cls.join(' ');
a_cls = a_cls.join(' ');
return (
<li class={ li_cls }>
<a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
</li>
);
}
}) }
</ul>
{ rhs }
</div>
</nav>
);
}
}
WBNavbar.defaultProps = {
'title': 'Workbench Advanced',
'items': [],
'form': null,
'onItemClicked': () => {}
}
export default WBNavbar;

Loading…
Cancel
Save