mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-24 12:05:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

TO show tooltips via keyboard forDuplicate,View,Rename, Download, Shutdown, Edit,Move, Delete buttons. (#4729)

Browse Source 
Co-authored-by: Norah Abanumay <norah@eduroam-int-dhcp-97-3-87.ucl.ac.uk>
This commit is contained in:
Joshua Zeltser 2020-06-07 14:26:01 +03:00 committed by GitHub
parent a90121c0d2
commit fb08a1bda3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
notebook/static/tree/less/tree.less
View File

@ -67,6 +67,8 @@ ul.breadcrumb {
.dynamic-buttons {
padding-top: @dashboard_tb_pad - 1px;
display: inline-block;
width: 400px;
}
.list_toolbar [class*="span"] {
@ -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
notebook/templates/tree.html
View File

@ -41,14 +41,24 @@ data-server-root="{{server_root}}"
{% 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">
@ -205,7 +215,10 @@ data-server-root="{{server_root}}"
{% block script %}
{{super()}}
<script type="text/javascript">
('#element').tooltip('enable')
</script>
<script src="{{ static_url("tree/js/main.min.js") }}" type="text/javascript" charset="utf-8"></script>
{% endblock %}