[TASK] Introduce tooltips for ListModule 52/37852/5
authorFrank Nägler <typo3@naegler.net>
Sun, 15 Mar 2015 11:29:59 +0000 (12:29 +0100)
committerFrank Nägler <typo3@naegler.net>
Wed, 25 Mar 2015 13:25:45 +0000 (14:25 +0100)
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 <typo3@helke.de>
Tested-by: Jan Helke <typo3@helke.de>
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Daniel Sattler <sattler@b13.de>
Tested-by: Daniel Sattler <sattler@b13.de>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/sysext/backend/Resources/Public/JavaScript/Tooltip.js [new file with mode: 0644]
typo3/sysext/recordlist/Classes/RecordList.php
typo3/sysext/recordlist/Resources/Public/JavaScript/Tooltip.js [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tooltip.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_extensionmanager.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Tooltip.js b/typo3/sysext/backend/Resources/Public/JavaScript/Tooltip.js
new file mode 100644 (file)
index 0000000..fa0921a
--- /dev/null
@@ -0,0 +1,58 @@
+/*
+ * 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;
+});
index 0a5ce4a..03e5eff 100644 (file)
@@ -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;
diff --git a/typo3/sysext/recordlist/Resources/Public/JavaScript/Tooltip.js b/typo3/sysext/recordlist/Resources/Public/JavaScript/Tooltip.js
new file mode 100644 (file)
index 0000000..e63e127
--- /dev/null
@@ -0,0 +1,25 @@
+/*
+ * 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'
+       });
+});
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tooltip.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tooltip.less
new file mode 100644 (file)
index 0000000..f3f560f
--- /dev/null
@@ -0,0 +1,6 @@
+//
+// Tooltips
+//
+.tooltip-inner {
+       padding: 5px 10px;
+}
index 9158ec1..4f40939 100644 (file)
        }
 }
 
-.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
+}
index 5edd9eb..038f38c 100644 (file)
@@ -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));
 //** 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;
 
index 2f7bf72..cdbd724 100644 (file)
@@ -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
 @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";
index d3180cf..3c3812a 100644 (file)
@@ -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;
 }