[FEATURE] sys_note: Display/functionality for hover/context menu 11/16911/8
authorStefan Neufeind <typo3.neufeind@speedpartner.de>
Sat, 1 Dec 2012 01:02:52 +0000 (02:02 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Mon, 11 Mar 2013 20:41:08 +0000 (21:41 +0100)
In page-module content-elements only show icons when hovered
and they have a contextmenu on the icon.

Add same functionality for sys_note

Change-Id: I170309ac5ffe8b9cfa25ba1c9933d69ddcbcbca8
Resolves: #43496
Releases: 6.1
Reviewed-on: https://review.typo3.org/16911
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/cms/layout/js/typo3pageModule.js
typo3/sysext/sys_note/Resources/Private/Templates/Note/List.html
typo3/sysext/t3skin/stylesheets/structure/module_web_list_sysnote.css

index 3b66224..d693700 100644 (file)
@@ -46,6 +46,9 @@ TYPO3.Components.PageModule = {
                Ext.select('td.t3-page-column')
                        .on('mouseover',this.setColumnActive, this)
                        .on('mouseout',this.setColumnInactive, this);
+               Ext.select('#typo3-dblist-sysnotes div.single-note')
+                       .on('mouseover',this.setSysnoteActive, this)
+                       .on('mouseout',this.setSysnoteInactive, this);
        },
 
        /**
@@ -97,6 +100,23 @@ TYPO3.Components.PageModule = {
        },
 
        /**
+        * This method is used as an event handler when the
+        * user hovers the a sysnote.
+        */
+       setSysnoteActive: function(event, target) {
+               Ext.get(target).findParent('div.single-note', null, true).addClass('active');
+       },
+
+       /**
+        * This method is used as event handler to unset active state of
+        * a sysnote when the mouse of the user leaves the sysnote.
+        */
+       setSysnoteInactive: function(event, target) {
+               Ext.get(target).findParent('div.single-note', null, true).removeClass('active');
+
+       },
+
+       /**
         * This method configures the drag'n'drop behavior in the page module
         */
        enableDragDrop: function() {
index aebe0a7..ebcbf12 100644 (file)
@@ -9,6 +9,7 @@
                        <f:for each="{notes}" as="note">
                                <div class="single-note category-{note.category}">
                                        <div class="header">
+                                               <span class="typeicon" oncontextmenu="showClickmenu('sys_note', '{note.uid}', '1', '', '', ''); return false;" onclick="showClickmenu('sys_note', '{note.uid}', '1', '','', ''); return false;"></span>
                                                <span><f:translate key="author" /></span>
                                                <f:if condition="{note.author.realName}">
                                                        <f:then>{note.author.realName}</f:then>
@@ -24,7 +25,7 @@
                                                        <span><f:translate key="personal" /></span>&nbsp;<f:translate key="yes" />
                                                </f:if>
 
-                                               <div class="right">
+                                               <div class="right icons">
                                                        <f:be.buttons.icon uri="{notes:editLink(id:note.uid)}" icon="actions-document-open" />
                                                </div>
                                        </div>
index 5be6b6e..4c3779e 100644 (file)
@@ -7,22 +7,51 @@
 }
 
 #typo3-dblist-sysnotes .single-note .header {
-       background: #d7d7d7  url(../../icons/ext/sys_note/icon-default.png) no-repeat top left;
-       padding-left: 30px;
-       height:23px;
-       line-height: 25px;
+       background: #d7d7d7;
+       height:24px;
+       line-height: 24px;
 }
 
-#typo3-dblist-sysnotes  .category-1 .header {
+#typo3-dblist-sysnotes .single-note .header span.typeicon {
+       background:  url(../../icons/ext/sys_note/icon-default.png) no-repeat top left;
+       width: 23px;
+       height: 24px;
+       margin-right: 7px;
+       display: block;
+       float:left;
+}
+
+#typo3-dblist-sysnotes .single-note .header .right.icons {
+       visibility: hidden;
+}
+
+#typo3-dblist-sysnotes .single-note.active .header {
+       background-color: #666;
+}
+
+#typo3-dblist-sysnotes .single-note.active .header .right.icons {
+       visibility: visible;
+}
+
+#typo3-dblist-sysnotes .single-note.active .header,
+#typo3-dblist-sysnotes .single-note.active .header span {
+       color: #d7d7d7;
+}
+
+#typo3-dblist-sysnotes .single-note .header span.typeicon {
+       cursor: pointer;
+}
+
+#typo3-dblist-sysnotes .category-1 .header span.typeicon {
        background-image: url(../../icons/ext/sys_note/icon-instruction.png);
 }
-#typo3-dblist-sysnotes  .category-2 .header {
+#typo3-dblist-sysnotes .category-2 .header span.typeicon {
        background-image: url(../../icons/ext/sys_note/icon-template.png);
 }
-#typo3-dblist-sysnotes  .category-3 .header {
+#typo3-dblist-sysnotes .category-3 .header span.typeicon {
        background-image: url(../../icons/ext/sys_note/icon-note.png);
 }
-#typo3-dblist-sysnotes  .category-4 .header {
+#typo3-dblist-sysnotes .category-4 .header span.typeicon {
        background-image: url(../../icons/ext/sys_note/icon-todo.png);
 }