graphdb-workbench
Version:
The web application for GraphDB APIs
462 lines (440 loc) • 23 kB
HTML
<link rel="stylesheet" type="text/css" href="css/ux-test1.css">
<link href="js/lib/rzslider/rzslider.min.css?v=3.1.0-RC3" rel="stylesheet"/>
<div class="content-wrapper">
<div core-errors></div>
<div class="mb-2">
<div class="mb-2">
<span class="btn btn-link" ng-click="clearRepo()">Unset repo</span>
<span class="btn btn-link secondary" ng-click="clearToasts()">Clear toasts</span>
<a href>Non-link 1</a>
<a href="#">Non-link 2</a>
<a href="https://graphdb.ontotext.com/" target="_blank">GraphDB Website</a>
</div>
<h2>Texts and toasts</h2>
<div>This is normal text, <span class="text-muted">with something muted</span> and then back to normal again.
</div>
<div class="mb-2">
<button class="btn btn-primary" ng-click="demoToast('info')">Info</button>
<button class="btn btn-secondary" ng-click="demoToast('info', false)">Info</button>
<button class="btn btn-primary" ng-click="demoToast('success')">Success</button>
<button class="btn btn-secondary" ng-click="demoToast('success', false)">Success</button>
<button class="btn btn-primary" ng-click="demoToast('warning')">Warning</button>
<button class="btn btn-secondary" ng-click="demoToast('warning', false)">Warning</button>
<button class="btn btn-primary" ng-click="demoToast('error')">Error</button>
<button class="btn btn-secondary" ng-click="demoToast('error', false)">Error</button>
</div>
<div class="row mb-2">
<div class="col-md-1" style="background-color: var(--primary-color-light)"> </div>
<div class="col-md-2" style="background-color: var(--primary-color)"> </div>
<div class="col-md-1" style="background-color: var(--primary-color-dark)"> </div>
<div class="col-md-1" style="background-color: var(--secondary-color-light)"> </div>
<div class="col-md-2" style="background-color: var(--secondary-color)"> </div>
<div class="col-md-1" style="background-color: var(--secondary-color-dark)"> </div>
<div class="col-md-1" style="background-color: var(--tertiary-color-light)"> </div>
<div class="col-md-2" style="background-color: var(--tertiary-color)"> </div>
<div class="col-md-1" style="background-color: var(--tertiary-color-dark)"> </div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Alerts (short) and text colors</h2>
<div class="alert alert-success">Lorem ipsum dolor sit amet.</div>
<div class="alert alert-info">Lorem ipsum dolor sit amet.</div>
<div class="alert alert-help">Lorem ipsum dolor sit amet.</div>
<div class="alert alert-warning">Lorem ipsum dolor sit amet.</div>
<div class="alert alert-danger">Lorem ipsum dolor sit amet.</div>
<div class="text-success">This is text success.</div>
<div class="text-danger">This is text danger.</div>
<div class="text-info">This is text info.</div>
<div class="text-warning">This is text warning.</div>
<div>
<span class="tag tag-success">Success</span>
<span class="tag tag-danger">Danger</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
</div>
</div>
<div class="col-md-6 lead">
<h2>Alerts (long) and text colors</h2>
<div class="alert alert-success">
<div>Lorem ipsum dolor sit amet.</div>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis
erat a ornare.
</div>
</div>
<div class="alert lead alert-info">
<div>Lorem ipsum dolor sit amet.</div>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis
erat a ornare.
</div>
</div>
<div class="alert lead alert-help">
<div>Lorem ipsum dolor sit amet.</div>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis
erat a ornare.
</div>
</div>
<div class="alert lead alert-warning">
<div>Lorem ipsum dolor sit amet.</div>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis
erat a ornare.
</div>
</div>
<div class="alert lead alert-danger">
<div>Lorem ipsum dolor sit amet.</div>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis
erat a ornare.
</div>
</div>
<div class="lead">
<div class="text-success">This is text success.</div>
<div class="text-danger">This is text danger.</div>
<div class="text-info">This is text info.</div>
<div class="text-warning">This is text warning.</div>
<div>
<span class="tag tag-success">Success</span>
<span class="tag tag-danger">Danger</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
</div>
</div>
</div>
</div>
<div style="width: 60%;">
<!--Inputs and forms-->
<div class="inputs-container"
style="justify-content: space-between; display: flex;gap: 10px; flex-direction: column;">
<h2>Inputs and forms</h2>
<label for="input1">Input</label>
<input gdb-tooltip="Input tooltip"
tooltip-placement="top"
class="form-control" type="text" name="title"
id="input1">
<label for="input2">Disabled</label>
<input gdb-tooltip="Input tooltip"
tooltip-placement="top"
class="form-control" type="text" name="title"
id="input2"
ng-disabled="true">
<label for="readonly">Readonly</label>
<input class="form-control" type="text" readonly value="Lorem ipsum" id="readonly"/>
<div style="display: flex; align-items: baseline; gap: 5px;">
<form name="testForm" id="testForm" novalidate>
<label for="invalidInput"> Invalid
<input required name="invalidInput"
class="form-control ng-invalid"
id="invalidInput"
type="text"
placeholder="Lorem ipsum">
</label>
</form>
<button type="submit" form="testForm" class="btn btn-primary create-connector-btn">Invalidate field
</button>
</div>
<label for="numberField">Number field</label>
<input class="form-control" placeholder="Number field" type="number" value="1234567890"
required id="numberField" pattern="-?[1-9][0-9]*(\.[0-9]+)?">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password" class="form-control form-control-lg"
required value="qwerty">
<label> Text area (expandable) and <strong>popover</strong>
<textarea type="text" class="form-control" placeholder="Hover for popover"
uib-popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare."
popover-trigger="mouseenter"
popover-placement="bottom"></textarea>
</label>
</div>
<br/>
<!--Buttons and toggles-->
<div class="buttons-container"
style="justify-content: space-between; display: flex;gap: 10px; flex-direction: column;">
<h2>Buttons and toggles</h2>
<h3>Icon buttons</h3>
<div class="icon-buttons">
<button class="btn btn-link p-0" type="button"
gdb-tooltip="Copy">
<em class="icon-copy"></em>
</button>
<button class="btn btn-link p-0" type="button"
gdb-tooltip="Disabled" disabled>
<em class="icon-copy"></em>
</button>
<button class="btn btn-link p-0" type="button"
gdb-tooltip="Repair">
<em class="icon-reload"></em>
</button>
<button class="btn btn-link secondary p-0" type="button"
gdb-tooltip="Delete">
<em class="icon-trash"></em>
</button>
</div>
<br/>
<h3>Icon buttons with text</h3>
<div class="icon-buttons">
<button type="button" class="btn btn-link pull-right">
<span class="icon-help" uib-popover="Help button" popover-placement="top"
popover-trigger="mouseenter"></span>
<span class="hidden-lg-down">Help</span>
</button>
<button class="btn btn-primary add-first-rule-btn"
gdb-tooltip="Tooltip">
<em class="icon-plus"></em>Button text
</button>
<div class="btn btn-outline-primary btn-sm">
<div ngf-select ngf-multiple="false"
class="selectFiles pointer clearfix"
gdb-tooltip="Tooltip">
<em ng-hide="false" class="fa fa-upload fa-2x"></em>
<span class="pageInfo" style="vertical-align: super; color: #8a8a8a;">Button text</span>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 mb-1">
<div class="btn btn-outline-primary btn-lg text-xs-left d-block"
role="button"
uib-popover="Tooltip"
popover-trigger="mouseenter"
popover-placement="bottom">
<div class="grid-container">
<em class="icon-link icon-lg"></em>
<div class="text">
<span>Button label</span>
<small class="text-muted">Small text</small>
</div>
</div>
</div>
</div>
</div>
<br/>
<h3>Radio buttons and checkboxes</h3>
<form name="myForm" class="radio">
<label class="padding-label" gdb-tooltip="tooltip">
<input type="radio" ng-model="color.name" value="red">
Red
</label><br/>
<label class="padding-label" gdb-tooltip="tooltip">
<input type="radio" ng-model="color.name" ng-value="specialValue">
Green
</label><br/>
<label class="padding-label" gdb-tooltip="tooltip">
<input type="radio" ng-model="color.name" value="blue">
Blue
</label><br/>
<label class="padding-label" gdb-tooltip="tooltip">
<input id="disabled" type="radio" value="disabled" ng-disabled="true"/>
Disabled option
</label>
</form>
<br>
<span gdb-tooltip="{{color.name}}"
popover-trigger="mouseenter"
popover-placement="top"
ng-repeat="color in colors">
<input id="color.name" type="checkbox" ng-model="checkedItem"/>
<label for="color.name">{{color.name}}</label>
<br>
</span>
<div>
<label>
<input type="checkbox"
disabled
gdb-tooltip="Disabled"
popover-trigger="mouseenter"
popover-placement="bottom"> Disabled option
</label>
</div>
<br/>
<h3>Toggle and slider</h3>
<div>
<span gdb-tooltip="Toggle" tooltip-placement="top" class="switch">
<input id="toggle" type="checkbox" class="switch" ng-checked="true"/>
<label for="toggle"></label>
</span>
</div>
<br/>
<div class="class-cnt-slider animate-show">
<rzslider id="ux-test-slider"
rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
</div>
</div>
<br/>
</div>
<!--Dropdowns-->
<div class="dropdowns-container" style="width: 60%;">
<h2>Dropdown menus</h2>
<select class="form-control" ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
<br>
<select class="form-control" disabled>
<option value="">-- choose color --</option>
</select>
<br>
<div id="repositorySelectDropdown" class="btn-group" role="group">
<button id="btnReposGroup" type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
guide-selector="repositoriesGroupButton">
<span ng-mouseover="" popover-popup-delay="1000" popover-trigger="mouseenter"
popover-placement="left-bottom"
uib-popover-template="popoverTemplate" popover-title="Title"
class="active-repository">
<em ng-class="'icon-repo-contour1'"></em>
Active Repo
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right pre-scrollable" aria-labelledby="dropdownMenuButton">
<li ng-repeat="repository in repositories"
ng-mouseover="repository" popover-popup-delay="500"
popover-trigger="mouseenter" popover-placement="left"
uib-popover-template="popoverTemplate" popover-title="{{repository}}">
<a class="dropdown-item">
<em ng-class="'icon-repo-se'" class="icon-1-5x icon-repo-graphdb"></em>
<span class="multiline-text">{{repository}}<br/>
<small>Local</small>
</span>
</a>
</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-primary dropdown-toggle" uib-dropdown-toggle>
<span class="icon-export"></span>Export
</button>
<ul class="dropdown-menu">
<li ng-repeat="format in formats" class="export-repo-format-{{format}}">
<span class="dropdown-item">{{format}}</span>
</li>
</ul>
</div>
</div>
<br/>
<br/>
<!--Action buttons-->
<div>
<h2>Action buttons</h2>
<button class="btn btn-primary" ng-click="openModal()">Click to open modal</button>
<button class="btn btn-primary add-first-rule-btn" ng-click="showInfoPanel()">Click to show side-panel</button>
<br/>
<br/>
<div>
<pageslide
ps-class="rdf-info-side-panel"
ps-open="openInfoPanel"
onopen="onopen"
onclose="onclose"
ps-side="right"
ps-click-outside="false"
ps-custom-height="calc(100vh - 55px)"
ps-size="25vw">
<div class="rdf-side-panel-content break-word-alt p-1 pt-2">
<button class="close mb-1 ml-1"
ng-click="closeInfoPanel(); $event.stopPropagation();"
guide-selector="close-info-panel"></button>
<h3 class="hovered-parent">
<a class="uri">Title</a>
<button class="btn btn-link btn-sm px-0 hovered-item"
title="Panel">
<span class="icon-link"></span>
</button>
</h3>
<p>
<button class="btn btn-sm btn-primary">Button</button>
</p>
<ul class="rdf-list tab-content">
<li class="item clearfix break-word-alt">Item 1</li>
<li class="item clearfix break-word-alt">Item 2</li>
<li class="item clearfix break-word-alt">Item 3</li>
<li class="item clearfix break-word-alt">Item 4</li>
</ul>
</div>
</pageslide>
</div>
</div>
<br/>
<!--Tabs and cards-->
<div>
<h2>Tabs and cards</h2>
<div role="tablist" aria-multiselectable="true">
<div class="card" ng-repeat="item in ['item1', 'item2', 'item3']">
<div class="card-header" role="tab">
<div class="pull-right">
<button class="btn btn-link p-0" type="button"
gdb-tooltip="Tooltip">
<em class="icon-copy"></em>
</button>
<button class="btn btn-link p-0" type="button"
gdb-tooltip="Tooltip">
<em class="icon-reload"></em>
</button>
<button class="btn btn-link secondary p-0" type="button"
gdb-tooltip="Tooltip">
<em class="icon-trash"></em>
</button>
</div>
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse"
aria-expanded="false">
{{item}}
</a>
</h5>
</div>
</div>
</div>
<div class="card">
<div class="card-block">
<h6>Active repo</h6>
<div class="actions-bar pull-right">
Card content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat
facilisis erat a ornare.
<button type="button" gdb-tooltip="Tooltip" class="btn btn-link"><span
class="icon-link"></span>
</button>
<button type="button" class="btn btn-link" gdb-tooltip="Button tooltip">
<span class="icon-edit"></span>
</button>
</div>
</div>
</div>
<div uib-collapse="helpHidden" class="wizard-help alert alert-info no-icon p-1 mb-2">
<div class="help-box d-flex">
<button class="close absolute"></button>
<div class="alert alert-help">
<p class="lead">{{'this.is.a' | translate}} <span class="small-caps">CONSTRUCT</span>
{{'construct.query.explanation' | translate}}</p>
<p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}
</p>
<p>{{'optional.query' | translate}} <em
ng-if="samples && samples.length > 0">{{getSampleName(samples[0], 'expandQuery')}}</em>
{{'sample.query.used' | translate}}</p>
</div>
<div>
<img src="css/images/expand.png?v=3.1.0-RC3" class="info-box-img" height="220"
alt="expand image">
</div>
</div>
</div>
</div>
<br/>
<!--Other-->
<div class="other-elements-container">
<h2>Other</h2>
<h3>Spinner</h3>
<div ng-show="true" onto-loader size="50"
class="spinner-container ot-loader"></div>
</div>
</div>