[FEATURE] Migrate open-docs counter to .badge 20/32820/5
authorFelix Kopp <felix-source@phorax.com>
Wed, 17 Sep 2014 10:23:46 +0000 (12:23 +0200)
committerMarkus Klein <klein.t3@reelworx.at>
Thu, 18 Sep 2014 10:17:50 +0000 (12:17 +0200)
During streamline of the backend we make use of the Bootstrap .badge
component. The Badge can be attached to every toolbar / menu item to
show a notification / counter.

An input field is the wrong component: no input is possible.
Also CSS can be removed for the former inline input.

Resolves: #61675
Releases: master
Change-Id: Ie0c0d15b84d43c54a5f72ad2e564c2990832612e
Reviewed-on: http://review.typo3.org/32820
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
typo3/sysext/opendocs/Classes/Controller/OpendocsController.php
typo3/sysext/opendocs/Resources/Public/Css/opendocs.css
typo3/sysext/opendocs/Resources/Public/JavaScript/opendocs.js
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 1c365b1..32f2c08 100644 (file)
@@ -80,8 +80,9 @@ class OpendocsController implements \TYPO3\CMS\Backend\Toolbar\ToolbarItemHookIn
 
                // Toolbar item icon
                $opendocsMenu[] = '<a href="#" class="toolbar-item">';
-               $opendocsMenu[] = '<input type="text" id="tx-opendocs-counter" disabled="disabled" value="' . $numDocs . '" />';
-               $opendocsMenu[] = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('apps-toolbar-menu-opendocs', array('title' => $title)) . '</a>';
+               $opendocsMenu[] = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('apps-toolbar-menu-opendocs', array('title' => $title));
+               $opendocsMenu[] = '<span class="badge" id="tx-opendocs-counter">' . $numDocs . '</span>';
+               $opendocsMenu[] = '</a>';
 
                // Toolbar item menu and initial content
                $opendocsMenu[] = '<div class="toolbar-item-menu" style="display: none;">';
index 2e6d02d..d1bbcdf 100644 (file)
@@ -18,20 +18,6 @@ Description : styles the Open Documents toolbar item
        background-image: url('../Images/toolbar_item_active_bg.png');
 }
 
-/* Small counter box in topbar / toolbar icon */
-#tx-opendocs-menu input {
-       font-size: 9px;
-       height: 12px;
-       line-height: 12px;
-       width: 14px;
-       text-align: right;
-       border: 1px solid #999;
-       margin-top: 1px;
-       margin-right: 3px;
-       padding: 1px 2px;
-       float: left;
-}
-
 #tx-opendocs-menu span.t3-icon {
 
 }
index 599a6f8..043ad49 100644 (file)
@@ -34,6 +34,7 @@ var OpenDocs = Class.create({
 
                        Event.observe($$('#tx-opendocs-menu .toolbar-item')[0], 'click', this.toggleMenu);
                        this.menu = $$('#tx-opendocs-menu .toolbar-item-menu')[0];
+                       this.updateNumberOfDocs(-1, true);
                }, this);
        },
 
@@ -93,8 +94,9 @@ var OpenDocs = Class.create({
                if (num < 0) {
                        num = $$('#tx-opendocs-menu tr.opendoc').length;
                }
-
-               $('tx-opendocs-counter').writeAttribute('value', num);
+               var counter = $('tx-opendocs-counter');
+               counter.update(num);
+               counter.toggle(num > 0);
        },
 
        /**
index 91db7d0..4215f8b 100644 (file)
 @badge-color:                 #fff;
 //** Linked badge text color on hover
 @badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
+@badge-bg:                    @gray;
 
 //** Badge text color in active nav link
 @badge-active-color:          @link-color;
index e95f613..168beb9 100644 (file)
@@ -4333,7 +4333,7 @@ a.label:focus {
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  background-color: #cdcdcd;
+  background-color: #666666;
   border-radius: 10px;
 }
 .badge:empty {