Skip to content
GitLab
Commit 97f24cf5 authored by Frank Nägler's avatar Frank Nägler
Browse files

[TASK] Introduce tooltips for ListModule 

This patch add tooltips for action icons in ListModule

Resolves: #65742
Releases: master
Change-Id: Id66f410de822af73ef74055f5b687dd1aef285d2
Reviewed-on: http://review.typo3.org/37852

Reviewed-by: Jan Helke's avatarJan Helke <typo3@helke.de>
Tested-by: Jan Helke's avatarJan Helke <typo3@helke.de>
Reviewed-by: Benjamin Kott's avatarBenjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott's avatarBenjamin Kott <info@bk2k.info>
Reviewed-by: default avatarDaniel Sattler <sattler@b13.de>
Tested-by: default avatarDaniel Sattler <sattler@b13.de>
Reviewed-by: default avatarFrank Nägler <typo3@naegler.net>
Tested-by: default avatarFrank Nägler <typo3@naegler.net>
parent 8e938cf9
Hide whitespace changes
Inline Side-by-side
typo3/sysext/backend/Resources/Public/JavaScript/Tooltip.js 0 → 100644
View file @ 97f24cf5
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
/**
* API for tooltip windows powered by Twitter Bootstrap.
*/
define('TYPO3/CMS/Backend/Tooltip', ['jquery'], function($) {
/**
* The main tooltip object
*/
var Tooltip = {
};
/**
* Initialize
*/
Tooltip.initialize = function(selector, options) {
options = options || {};
$(selector).tooltip(options);
};
/**
* Show tooltip on $element
*
* @param {object} $element
* @param {string} title
*/
Tooltip.show = function($element, title) {
$element
.attr('data-placement', 'auto')
.attr('data-title', title)
.tooltip('show');
};
/**
* Hide tooltip on $element
*
* @param $element
*/
Tooltip.hide = function($element) {
$element.tooltip('hide');
};
Tooltip.initialize('[data-toggle="tooltip"]');
TYPO3.Tooltip = Tooltip;
return Tooltip;
});
typo3/sysext/recordlist/Classes/RecordList.php
View file @ 97f24cf5
......@@ -268,6 +268,7 @@ class RecordList {
$this->doc->backPath = $GLOBALS['BACK_PATH'];
$this->doc->setModuleTemplate('EXT:recordlist/Resources/Private/Templates/db_list.html');
$this->doc->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/AjaxDataHandler');
$this->doc->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Recordlist/Tooltip');
// Loading current page record and checking access:
$this->pageinfo = BackendUtility::readPageAccess($this->id, $this->perms_clause);
$access = is_array($this->pageinfo) ? 1 : 0;
......
typo3/sysext/recordlist/Resources/Public/JavaScript/Tooltip.js 0 → 100644
View file @ 97f24cf5
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
/**
* API for tooltip windows powered by Twitter Bootstrap.
*/
define('TYPO3/CMS/Recordlist/Tooltip', ['jquery', 'TYPO3/CMS/Backend/Tooltip'], function($) {
TYPO3.Tooltip.initialize('.table-fit a[title]', {
delay: {
show: 500,
hide: 100
},
container: 'body'
});
});
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tooltip.less 0 → 100644
View file @ 97f24cf5
//
// Tooltips
//
.tooltip-inner {
padding: 5px 10px;
}
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_extensionmanager.less
View file @ 97f24cf5
......@@ -238,20 +238,16 @@
}
}
.headerTooltip,
.tooltip {
.headerTooltip {
.box-shadow(2px 2px 11px #666);
display: none;
width: 400px;
width: 150px;
background-color: #ffa;
border: 1px solid #cc9;
padding: 3px;
font-size: 13px;
z-index: 1000;
}
.headerTooltip {
width: 150px;
}
// Loader
#terTableWrapper {
......@@ -329,4 +325,4 @@ span.ter-ext-state {
top: 4px;
}
}
}
\ No newline at end of file
}
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
View file @ 97f24cf5
......@@ -47,7 +47,7 @@
@font-size-base: 12px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~15px
@font-size-small: ceil((@font-size-base * 0.85)); // ~11px
@font-size-small: 11px; // ~11px
@font-size-h1: floor((@font-size-base * 2.3));
@font-size-h2: floor((@font-size-base * 1.6));
......@@ -519,11 +519,11 @@
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;
@tooltip-bg: #333;
@tooltip-opacity: 1;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
@tooltip-arrow-width: 3px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
......
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
View file @ 97f24cf5
......@@ -60,8 +60,8 @@
// Components w/ JavaScript
@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/modals.less";
// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/tooltip.less";
@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/popovers.less";
@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/tooltip.less";
// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/carousel.less";
// Utility classes
......@@ -117,6 +117,7 @@
@import "TYPO3/_element_spinner.less";
@import "TYPO3/_element_tab.less";
@import "TYPO3/_element_table.less";
@import "TYPO3/_element_tooltip.less";
@import "TYPO3/_element_panel.less";
@import "TYPO3/_element_popover.less";
@import "TYPO3/_element_tceforms.less";
......
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
View file @ 97f24cf5
......@@ -4967,6 +4967,110 @@ button.close {
border-left-color: #ffffff;
bottom: -10px;
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}
.tooltip.in {
opacity: 1;
filter: alpha(opacity=100);
}
.tooltip.top {
margin-top: -3px;
padding: 3px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 3px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 3px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #333333;
border-radius: 2px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -3px;
border-width: 3px 3px 0;
border-top-color: #333333;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
right: 3px;
margin-bottom: -3px;
border-width: 3px 3px 0;
border-top-color: #333333;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 3px;
margin-bottom: -3px;
border-width: 3px 3px 0;
border-top-color: #333333;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -3px;
border-width: 3px 3px 3px 0;
border-right-color: #333333;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -3px;
border-width: 3px 0 3px 3px;
border-left-color: #333333;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -3px;
border-width: 0 3px 3px;
border-bottom-color: #333333;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 3px;
margin-top: -3px;
border-width: 0 3px 3px;
border-bottom-color: #333333;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 3px;
margin-top: -3px;
border-width: 0 3px 3px;
border-bottom-color: #333333;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
......@@ -8994,6 +9098,9 @@ fieldset[disabled] .table .btn-default.active {
.table-fit-inline-block > .table {
width: auto;
}
.tooltip-inner {
padding: 5px 10px;
}
.panel.ui-sortable-helper {
border-style: dashed;
}
......@@ -11557,21 +11664,17 @@ fieldset[disabled] .live-search-list .x-btn button.active {
.typo3-extension-manager form#extensionUploadForm div.control-group:last-child {
margin-bottom: 0;
}
.headerTooltip,
.tooltip {
.headerTooltip {
-webkit-box-shadow: 2px 2px 11px #666666;
box-shadow: 2px 2px 11px #666666;
display: none;
width: 400px;
width: 150px;
background-color: #ffa;
border: 1px solid #cc9;
padding: 3px;
font-size: 13px;
z-index: 1000;
}
.headerTooltip {
width: 150px;
}
#terTableWrapper {
position: relative;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment