You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by zj...@apache.org on 2019/11/27 06:07:19 UTC
[zeppelin] branch master updated: [ZEPPELIN-3916] Fix bug -
notebook icon can not hide correctly when move inside the tooltip
This is an automated email from the ASF dual-hosted git repository.
zjffdu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new dcae640 [ZEPPELIN-3916] Fix bug - notebook icon can not hide correctly when move inside the tooltip
dcae640 is described below
commit dcae6405a16d3afcd51a1586c0be2efd8b87b0d9
Author: Jay Jin <ja...@gmail.com>
AuthorDate: Sun Nov 24 17:37:50 2019 +0900
[ZEPPELIN-3916] Fix bug - notebook icon can not hide correctly when move inside the tooltip
### What is this PR for?
(Before)
notebook icon can not hide correctly when move inside the tooltip
(Problem)
Angular cannot detect 'mouseLeave' event when moving inside tooltip
(Solution)
Replace ng-mouseleave and ng-mouseenter event with pure css
(After)
### What type of PR is it?
Bug Fix
### Todos
* [ ] - Task
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-3916
### How should this be tested?
* First time? Setup Travis CI as described on https://zeppelin.apache.org/contribution/contributions.html#continuous-integration
* Strongly recommended: add automated unit tests for any new or changed behavior
* Outline any manual steps to test the PR here.
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update?
* Is there breaking changes for older versions?
* Does this needs documentation?
Author: Jay Jin <ja...@gmail.com>
Closes #3526 from milooy/feat/ZEPPELIN-3916 and squashes the following commits:
ff0fa3864 [Jay Jin] Fix ZEPPELIN-3916
---
zeppelin-web/src/app/home/home.css | 8 ++
zeppelin-web/src/app/home/notebook-template.html | 139 ++++++++++++-----------
2 files changed, 79 insertions(+), 68 deletions(-)
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 03ae4c1..e709671 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -59,6 +59,14 @@ body .navbar {
text-decoration: none;
}
+.note-folder-item:hover .note-folder-item-actions {
+ display: inline-block;
+}
+
+.note-folder-item-actions {
+ display: none;
+}
+
/* Css for the Notebook Dropdown */
.expandable ul {
diff --git a/zeppelin-web/src/app/home/notebook-template.html b/zeppelin-web/src/app/home/notebook-template.html
index 76602aa..9915acb 100644
--- a/zeppelin-web/src/app/home/notebook-template.html
+++ b/zeppelin-web/src/app/home/notebook-template.html
@@ -14,79 +14,81 @@ limitations under the License.
<div ng-class="note_folder_renderer">
<!-- note -->
- <div ng-if="node.children == null && isFilterNote(node)" ng-mouseenter="showNoteButton=true"
- ng-mouseleave="showNoteButton=false">
+ <div ng-if="node.children == null && isFilterNote(node)" class="note-folder-item">
<a style="text-decoration: none;" href="#/notebook/{{node.id}}">
<i style="font-size: 10px;"
ng-class="query.q && node.isTrash ? 'fa fa-trash-o' : 'icon-doc'"></i> {{getNoteName(node)}}
</a>
- <!-- if note is not in trash -->
- <a ng-if="!node.isTrash" style="text-decoration: none;">
- <i style="margin-left: 10px;"
- class="fa fa-pencil notebook-list-btn" ng-show="showNoteButton"
- ng-click="node.path ? renameNote(node.id, node.path) : renameNote(node.id, node.name)"
- tooltip-placement="bottom" uib-tooltip="Rename note">
- </i>
- </a>
- <a ng-if="!node.isTrash" style="text-decoration: none;">
- <i class="fa fa-eraser notebook-list-btn" ng-show="showNoteButton" ng-click="clearAllParagraphOutput(node.id)"
- tooltip-placement="bottom" uib-tooltip="Clear output">
- </i>
- </a>
- <a ng-if="!node.isTrash" style="text-decoration: none;">
- <i class="fa fa-trash-o notebook-list-btn" ng-show="showNoteButton" ng-click="moveNoteToTrash(node.id)"
- tooltip-placement="bottom" uib-tooltip="Move note to Trash">
- </i>
- </a>
- <!-- if note is in trash -->
- <a ng-if="node.isTrash">
- <i class="fa fa-undo notebook-list-btn" ng-show="showNoteButton" ng-click="restoreNote(node.id)"
- tooltip-placement="bottom" uib-tooltip="Restore note">
- </i>
- </a>
- <a ng-if="node.isTrash" style="font-size: 16px;">
- <i class="fa fa-times notebook-list-btn" ng-show="showNoteButton" ng-click="removeNote(node.id)"
- tooltip-placement="bottom" uib-tooltip="Remove note permanently">
- </i>
- </a>
- </div>
-
- <!-- folder -->
- <div ng-if="node.children != null && node.id !== TRASH_FOLDER_ID">
- <div ng-mouseenter="showFolderButton=true"
- ng-mouseleave="showFolderButton=false">
- <a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">
- <i style="font-size: 10px;" ng-class="node.hidden ? 'fa fa-folder' : 'fa fa-folder-open'"></i> {{getNoteName(node)}}
- </a>
- <a ng-if="!node.isTrash" href="" data-toggle="modal" data-target="#noteCreateModal" style="text-decoration: none;"
- ng-controller="NoteCreateCtrl as noteCreateCtrl" ng-click="noteCreateCtrl.getInterpreterSettings()" data-path="{{node.id}}">
+ <span class="note-folder-item-actions">
+ <!-- if note is not in trash -->
+ <a ng-if="!node.isTrash" style="text-decoration: none;">
<i style="margin-left: 10px;"
- class="fa fa-plus notebook-list-btn" ng-show="showFolderButton"
- tooltip-placement="bottom" uib-tooltip="Create new note">
+ class="fa fa-pencil notebook-list-btn"
+ ng-click="node.path ? renameNote(node.id, node.path) : renameNote(node.id, node.name)"
+ tooltip-placement="bottom" uib-tooltip="Rename note">
</i>
</a>
<a ng-if="!node.isTrash" style="text-decoration: none;">
- <i class="fa fa-pencil notebook-list-btn" ng-show="showFolderButton" ng-click="renameFolder(node)"
- tooltip-placement="bottom" uib-tooltip="Rename folder">
+ <i class="fa fa-eraser notebook-list-btn" ng-click="clearAllParagraphOutput(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Clear output">
</i>
</a>
- <!-- if folder is not in trash -->
- <a ng-if="!node.isTrash">
- <i class="fa fa-trash-o notebook-list-btn" ng-show="showFolderButton" ng-click="moveFolderToTrash(node.id)"
- tooltip-placement="bottom" uib-tooltip="Move folder to Trash">
+ <a ng-if="!node.isTrash" style="text-decoration: none;">
+ <i class="fa fa-trash-o notebook-list-btn" ng-click="moveNoteToTrash(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Move note to Trash">
</i>
</a>
- <!-- if folder is in trash -->
+ <!-- if note is in trash -->
<a ng-if="node.isTrash">
- <i class="fa fa-undo notebook-list-btn" ng-show="showFolderButton" ng-click="restoreFolder(node.id)"
- tooltip-placement="bottom" uib-tooltip="Restore folder">
+ <i class="fa fa-undo notebook-list-btn" ng-click="restoreNote(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Restore note">
</i>
</a>
- <a ng-if="node.isTrash" style="font-size: 16px">
- <i class="fa fa-times notebook-list-btn" ng-show="showFolderButton" ng-click="removeFolder(node.id)"
- tooltip-placement="bottom" uib-tooltip="Remove folder permanently">
+ <a ng-if="node.isTrash" style="font-size: 16px;">
+ <i class="fa fa-times notebook-list-btn" ng-click="removeNote(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Remove note permanently">
</i>
</a>
+ </span>
+ </div>
+
+ <!-- folder -->
+ <div ng-if="node.children != null && node.id !== TRASH_FOLDER_ID">
+ <div class="note-folder-item">
+ <a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">
+ <i style="font-size: 10px;" ng-class="node.hidden ? 'fa fa-folder' : 'fa fa-folder-open'"></i> {{getNoteName(node)}}
+ </a>
+ <span class="note-folder-item-actions">
+ <a ng-if="!node.isTrash" href="" data-toggle="modal" data-target="#noteCreateModal" style="text-decoration: none;"
+ ng-controller="NoteCreateCtrl as noteCreateCtrl" ng-click="noteCreateCtrl.getInterpreterSettings()" data-path="{{node.id}}">
+ <i style="margin-left: 10px;"
+ class="fa fa-plus notebook-list-btn"
+ tooltip-placement="bottom" uib-tooltip="Create new note">
+ </i>
+ </a>
+ <a ng-if="!node.isTrash" style="text-decoration: none;">
+ <i class="fa fa-pencil notebook-list-btn" ng-click="renameFolder(node)"
+ tooltip-placement="bottom" uib-tooltip="Rename folder">
+ </i>
+ </a>
+ <!-- if folder is not in trash -->
+ <a ng-if="!node.isTrash">
+ <i class="fa fa-trash-o notebook-list-btn" ng-click="moveFolderToTrash(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Move folder to Trash">
+ </i>
+ </a>
+ <!-- if folder is in trash -->
+ <a ng-if="node.isTrash">
+ <i class="fa fa-undo notebook-list-btn" ng-click="restoreFolder(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Restore folder">
+ </i>
+ </a>
+ <a ng-if="node.isTrash" style="font-size: 16px">
+ <i class="fa fa-times notebook-list-btn" ng-click="removeFolder(node.id)"
+ tooltip-placement="bottom" uib-tooltip="Remove folder permanently">
+ </i>
+ </a>
+ </span>
</div>
<div ng-if="!node.hidden">
<ul style="list-style-type: none; padding-left:15px;">
@@ -96,21 +98,22 @@ limitations under the License.
</div>
<!-- trash folder -->
<div ng-if="node.id === TRASH_FOLDER_ID">
- <div ng-mouseenter="showFolderButton=true"
- ng-mouseleave="showFolderButton=false">
+ <div class="note-folder-item">
<a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">
<i style="font-size: 14px;" class="fa fa-trash-o"></i> Trash
</a>
- <a style="text-decoration: none;">
- <i style="margin-left: 10px"
- class="fa fa-undo notebook-list-btn" ng-show="showFolderButton" ng-click="restoreAll()"
- tooltip-placement="bottom" uib-tooltip="Restore all">
- </i>
- <i style="font-size: 16px;"
- class="fa fa-times notebook-list-btn" ng-show="showFolderButton" ng-click="emptyTrash()"
- tooltip-placement="bottom" uib-tooltip="Empty trash">
- </i>
- </a>
+ <span class="note-folder-item-actions">
+ <a style="text-decoration: none;">
+ <i style="margin-left: 10px"
+ class="fa fa-undo notebook-list-btn" ng-click="restoreAll()"
+ tooltip-placement="bottom" uib-tooltip="Restore all">
+ </i>
+ <i style="font-size: 16px;"
+ class="fa fa-times notebook-list-btn" ng-click="emptyTrash()"
+ tooltip-placement="bottom" uib-tooltip="Empty trash">
+ </i>
+ </a>
+ </span>
</div>
<div ng-if="!node.hidden">
<ul style="list-style-type: none; padding-left:15px;">