Skip to content

Update UI so interface options are more discoverable #1187

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

Closed
wants to merge 4 commits into from
Closed

Update UI so interface options are more discoverable #1187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e358cd
Delete path.js
sgibson91 Oct 30, 2020
08e9048
Remove path.js import
sgibson91 Oct 30, 2020
78ef05f
Update JavaScript to parse urlpath from radio buttons
sgibson91 Oct 30, 2020
944439a
Update index.html to provide radio buttons for UI selection
sgibson91 Oct 30, 2020
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
33 changes: 17 additions & 16 deletions binderhub/static/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import 'event-source-polyfill';

import BinderImage from './src/image';
import { markdownBadge, rstBadge } from './src/badge';
import { getPathType, updatePathText } from './src/path';
import { nextHelpText } from './src/loading';

import 'bootstrap/dist/css/bootstrap.min.css';
Expand All @@ -40,7 +39,7 @@ function update_favicon(path) {
document.getElementsByTagName('head')[0].appendChild(link);
}

function v2url(providerPrefix, repository, ref, path, pathType) {
function v2url(providerPrefix, repository, ref, filepath, urlpath) {
// return a v2 url from a providerPrefix, repository, ref, and (file|url)path
if (repository.length === 0) {
// no repo, no url
Expand All @@ -52,9 +51,16 @@ function v2url(providerPrefix, repository, ref, path, pathType) {
else {
var url = window.location.origin + BASE_URL + 'v2/' + providerPrefix + '/' + repository + '/' + ref;
}
if (path && path.length > 0) {
if (filepath && filepath.length > 0) {
// encode the path, it will be decoded in loadingMain
url = url + '?' + pathType + 'path=' + encodeURIComponent(path);
url = url + '?' + 'filepath=' + encodeURIComponent(path);
}
if ((urlpath !== "notebook") && urlpath.length > 0) {
var connector = '?';
if (path && filepath.length > 0) {
connector = '&';
}
url = url + connector + 'urlpath=' + encodeURIComponent(urlpath);
}
return url;
}
Expand Down Expand Up @@ -126,9 +132,10 @@ function getBuildFormValues() {
providerPrefix === 'hydroshare') {
ref = "";
}
var path = $('#filepath').val().trim();
var filepath = $('#filepath').val().trim();
var urlpath = $('input[name="ui-option"]:checked').val();
return {'providerPrefix': providerPrefix, 'repo': repo,
'ref': ref, 'path': path, 'pathType': getPathType()}
'ref': ref, 'filepath': filepath, 'urlpath': urlpath}
}

function updateUrls(formValues) {
Expand All @@ -139,8 +146,8 @@ function updateUrls(formValues) {
formValues.providerPrefix,
formValues.repo,
formValues.ref,
formValues.path,
formValues.pathType
formValues.filepath,
formValues.urlpath
);

if ((url||'').trim().length > 0){
Expand Down Expand Up @@ -281,14 +288,6 @@ function indexMain() {
updateUrls();
});

$("#url-or-file-btn").find("a").click(function (evt) {
evt.preventDefault();

$("#url-or-file-selected").text($(this).text());
updatePathText();
updateUrls();
});
updatePathText();
updateRepoText();

$('#repository').on('keyup paste change', function(event) {updateUrls();});
Expand All @@ -297,6 +296,8 @@ function indexMain() {

$('#filepath').on('keyup paste change', function(event) {updateUrls();});

$("#ui-chooser").click(function(event) {updateUrls();});

$('#toggle-badge-snippet').on('click', function() {
var badgeSnippets = $('#badge-snippets');
if (badgeSnippets.hasClass('hidden')) {
Expand Down
20 changes: 0 additions & 20 deletions binderhub/static/js/src/path.js
View file
Open in desktop

This file was deleted.

49 changes: 28 additions & 21 deletions binderhub/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,27 +71,10 @@ <h4 id="form-header" class='row'>Build and launch a repository</h4>
<input class="form-control" type="text" id="ref" placeholder="master"/>
</div>
<div class="form-group col-md-6">
<label for="filepath"></label>
<div class="input-group">
<input class="form-control" type="text" id="filepath"
placeholder=""
/>
<div class="input-group-btn" id="url-or-file-btn">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
title="Specify whether the path to open is a URL or a file"
>
<span id="url-or-file-selected">
{{ 'URL' if urlpath else 'File' }}
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">File</a></li>
<li class="dropdown-item"><a href="#">URL</a></li>
</ul>
</div>
</div>
<label for="filepath">Path to a notebook file (optional)</label>
<input class="form-control" type="text" id="filepath"
placeholder="Path to a notebook file (optional)"
/>
</div>

<div class="form-group col-md-2">
Expand All @@ -101,6 +84,30 @@ <h4 id="form-header" class='row'>Build and launch a repository</h4>
</div>
</div>

<!-- Radio buttons to select User Interface -->
<div class="form-row row">
<div class="form-group col-md-3">
<label for="ui-chooser">Choose your User Interface:</label>
</div>
<div class="form-check form-check-inline" data-toggle="buttons" id="ui-chooser">
<div class="form-check col-md-3">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="ui-option" id="notebook" value="notebook" autocomplete="off" checked> Classic Notebook
</label>
</div>
<div class="form-check col-md-3">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="ui-option" id="lab" value="lab" autocomplete="off"> JupyterLab
</label>
</div>
<div class="form-check col-md-3">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="ui-option" id="rstudio" value="rstudio" autocomplete="off"> RStudio
</label>
</div>
</div>
</div>

<!--url section-->
<div class="url row">
<div class="dropdownmenu">
Expand Down