Skip to content

Commit

Permalink
TO show tooltips via keyboard forDuplicate,View,Rename, Download, Shu…
Browse files Browse the repository at this point in the history 
…tdown, Edit,Move, Delete buttons. (#4729)

Co-authored-by: Norah Abanumay <norah@eduroam-int-dhcp-97-3-87.ucl.ac.uk>
  • Loading branch information
@joshuazeltser
joshuazeltser and Norah Abanumay authored Jun 7, 2020
1 parent a90121c commit fb08a1b
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 9 deletions.
47 changes: 47 additions & 0 deletions notebook/static/tree/less/tree.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@ ul.breadcrumb {
.dynamic-buttons {
padding-top: @dashboard_tb_pad - 1px;
display: inline-block;
width: 400px;

}

.list_toolbar [class*="span"] {
Expand Down Expand Up @@ -410,3 +412,48 @@ ul#new-menu {
display: inline-block;
padding-top: @dashboard_tb_pad;
}

//TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" buttons.

.visually-hidden {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

button:focus + [role="tooltip"] {
visibility: visible;
opacity: 1;
}

.button-and-tooltip {
position: relative;
display: inline-block;
}

[role="tooltip"] {
/* Position the tooltip */
position: absolute;
top:70%;
display:inline;
//--------------
visibility: hidden;
width: 100px;
background-color: #F0EFEF;
color: #080808;
text-align: center;
padding: 3px;
outline-color: grey;
outline-offset: -2px;
outline-style: auto;
outline-width:1px;
z-index: 1;
opacity: 0;
transition: opacity .6s;
margin: 3px;
font-size:10px;
}
31 changes: 22 additions & 9 deletions notebook/templates/tree.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,24 @@
{% trans %}Select items to perform actions on them.{% endtrans %}
</div>
<div class="dynamic-buttons">
<button title="{% trans %}Duplicate selected{% endtrans %}" aria-label="{% trans %}Duplicate{% endtrans %}" class="duplicate-button btn btn-default btn-xs">{% trans %}Duplicate{% endtrans %}</button>
<button title="{% trans %}Rename selected{% endtrans %}" aria-label="{% trans %}Rename{% endtrans %}" class="rename-button btn btn-default btn-xs">{% trans %}Rename{% endtrans %}</button>
<button title="{% trans %}Move selected{% endtrans %}" aria-label="{% trans %}Move{% endtrans %}" class="move-button btn btn-default btn-xs">{% trans %}Move{% endtrans %}</button>
<button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download{% endtrans %}" class="download-button btn btn-default btn-xs">{% trans %}Download{% endtrans %}</button>
<button title="{% trans %}Shutdown selected notebook(s){% endtrans %}" aria-label="{% trans %}Shutdown{% endtrans %}" class="shutdown-button btn btn-default btn-xs btn-warning">{% trans %}Shutdown{% endtrans %}</button>
<button title="{% trans %}View selected{% endtrans %}" aria-label="{% trans %}View{% endtrans %}" class="view-button btn btn-default btn-xs">{% trans %}View{% endtrans %}</button>
<button title="{% trans %}Edit selected{% endtrans %}" aria-label="{% trans %}Edit{% endtrans %}" class="edit-button btn btn-default btn-xs">{% trans %}Edit{% endtrans %}</button>
<button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
<button title="{% trans %}Duplicate selected{% endtrans %}" aria-label="{% trans %}Duplicate selected{% endtrans %}" class="duplicate-button btn btn-default btn-xs" aria-describedby="tooltip1">{% trans %}Duplicate{% endtrans %} </button>
<div role="tooltip" id="tooltip1" >{% trans %}Duplicate selected{% endtrans %}</div>
<button title="{% trans %}Rename selected{% endtrans %}" aria-label="{% trans %}Rename selected{% endtrans %}" class="rename-button btn btn-default btn-xs" aria-describedby="tooltip2">{% trans %}Rename{% endtrans %}</button>
<div role="tooltip" id="tooltip2" >{% trans %}Rename selected{% endtrans %}</div>
<button title="{% trans %}Move selected{% endtrans %}" aria-label="{% trans %}Move selected{% endtrans %}" class="move-button btn btn-default btn-xs" aria-describedby="tooltip3">{% trans %}Move{% endtrans %}</button>
<div role="tooltip" id="tooltip3" >{% trans %}Move selected{% endtrans %}</div>
<button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download selected{% endtrans %}" class="download-button btn btn-default btn-xs" aria-describedby="tooltip4">{% trans %}Download{% endtrans %}</button>
<div role="tooltip" id="tooltip4" >{% trans %}Download selected{% endtrans %}</div>
<button title="{% trans %}Shutdown selected notebook(s){% endtrans %}" aria-label="{% trans %}Shutdown selected notebook(s){% endtrans %}" class="shutdown-button btn btn-default btn-xs btn-warning" aria-describedby="tooltip5">{% trans %}Shutdown{% endtrans %}</button>
<div role="tooltip" id="tooltip5" >{% trans %}Shutdown selected notebook(s){% endtrans %}</div>
<button title="{% trans %}View selected{% endtrans %}" aria-label="{% trans %}View selected{% endtrans %}" class="view-button btn btn-default btn-xs" aria-describedby="tooltip6">{% trans %}View{% endtrans %}</button>
<div role="tooltip" id="tooltip6" >{% trans %}View selected{% endtrans %}</div>
<button title="{% trans %}Edit selected{% endtrans %}" aria-label="{% trans %}Edit selected{% endtrans %}" class="edit-button btn btn-default btn-xs" aria-describedby="tooltip7">{% trans %}Edit{% endtrans %}</button>
<div role="tooltip" id="tooltip7" >{% trans %}Edit selected{% endtrans %}</div>
<button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger" aria-describedby="tooltip8">
<i class="fa fa-trash"></i>
</button>
<div role="tooltip" id="tooltip8" >{% trans %}Delete selected{% endtrans %}</div>
</div>
</div>
<div class="col-sm-4 no-padding tree-buttons">
Expand Down Expand Up @@ -205,7 +215,10 @@

{% block script %}
{{super()}}

<script type="text/javascript">
('#element').tooltip('enable')

This comment has been minimized.

Sign in to view

Copy link
@danlester

danlester Aug 3, 2020

Contributor

Should this not be $('#element') or similar?
</script>

<script src="{{ static_url("tree/js/main.min.js") }}" type="text/javascript" charset="utf-8"></script>

{% endblock %}

0 comments on commit fb08a1b

Please sign in to comment.