[TASK] Update styling of sys notes 10/43510/4
authorFrank Nägler <frank.naegler@typo3.org>
Wed, 23 Sep 2015 19:12:00 +0000 (21:12 +0200)
committerGeorg Ringer <georg.ringer@gmail.com>
Thu, 24 Sep 2015 08:20:33 +0000 (10:20 +0200)
Resolves: #70064
Releases: master
Change-Id: I875c2a8031550a4fcbc7b1dc73ed6d4a78e4687e
Reviewed-on: http://review.typo3.org/43510
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Build/Resources/Public/Less/TYPO3/_module_web_list_sysnote.less
typo3/sysext/core/Classes/Imaging/IconRegistry.php
typo3/sysext/sys_note/Configuration/TCA/sys_note.php
typo3/sysext/sys_note/Resources/Private/Templates/Note/List.html
typo3/sysext/sys_note/Resources/Public/Icons/default.png [deleted file]
typo3/sysext/sys_note/Resources/Public/Icons/instruction.png [deleted file]
typo3/sysext/sys_note/Resources/Public/Icons/note.png [deleted file]
typo3/sysext/sys_note/Resources/Public/Icons/template.png [deleted file]
typo3/sysext/sys_note/Resources/Public/Icons/todo.png [deleted file]
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 5a9348c..dcb8476 100644 (file)
@@ -2,97 +2,55 @@
 // Sys notes
 //
 
-// Should be added by sys_note only when necessary
-#typo3-dblist-sysnotes {
-       margin-top: 15px;
+@sysnote-instruction-bg:      @state-info-bg;
+@sysnote-instruction-color:   #333;
 
-       .single-note {
-               margin-bottom: 12px;
+@sysnote-template-bg:         @state-warning-bg;
+@sysnote-template-color:      #333;
 
-               .header {
-                       min-height: 24px;
-                       line-height: 24px;
-                       background: #d7d7d7;
-                       color: #000;
-                       font-size: 0.9em;
+@sysnote-notice-bg:           @state-notice-bg;
+@sysnote-notice-color:        #333;
 
-                       span.typeicon {
-                               width: 23px;
-                               height: 24px;
-                               margin-right: 7px;
-                               display: block;
-                               float: left;
-                               cursor: pointer;
-                               background: url(../../../../sys_note/Resources/Public/Icons/default.png) no-repeat top left;
-                       }
-                       .right.icons {
-                               visibility: hidden;
-                       }
-                       .right {
-                               float: right;
-                               margin-right: 5px;
-                       }
-                       span {
-                               color: #666;
-                       }
-               }
+@sysnote-todo-bg:             @state-success-bg;
+@sysnote-todo-color:          #333;
 
-               .content {
-                       padding: 12px;
-                       background: #fffeed;
-                       border: 1px solid #dadada;
-                       border-top: none;
-                       color: #666;
-                       .title {
-                               font-weight: bold;
-                               margin-bottom: 6px;
+.typo3-dblist-sysnotes {
+       margin-top: 15px;
+       .panel-sysnote {
+               border: 0;
+               .panel-heading {
+                       padding: 5px;
+                       .typeicon {
+                               padding: 4px 4px 12px 4px;
+                               .icon {
+                                       margin-top: 5px;
+                               }
                        }
                }
-       }
-       .single-note:hover {
-               .header {
-                       background-color: #666;
-                       .right.icons {
-                               visibility: visible;
+               .panel-body {
+                       h4 {
+                               margin-top: 0;
+                               span {
+                                       font-style: italic;
+                               }
                        }
                }
        }
-
-       .category-1 {
-               .header {
-                       span.typeicon {
-                               background-image: url(../../../../sys_note/Resources/Public/Icons/instruction.png);
-                       }
-               }
+       .panel-sysnote-category-1 {
+               background-color: @sysnote-instruction-bg;
+               color: @sysnote-instruction-color;
        }
-       .category-2 {
-               .header {
-                       span.typeicon {
-                               background-image: url(../../../../sys_note/Resources/Public/Icons/template.png);
-                       }
-               }
-       }
-       .category-3 {
-               .header {
-                       span.typeicon {
-                               background-image: url(../../../../sys_note/Resources/Public/Icons/note.png);
-                       }
-               }
+       .panel-sysnote-category-2 {
+               background-color: @sysnote-template-bg;
+               color: @sysnote-template-color;
        }
-       .category-4 {
-               .header {
-                       span.typeicon {
-                               background-image: url(../../../../sys_note/Resources/Public/Icons/todo.png);
-                       }
-               }
+       .panel-sysnote-category-3 {
+               background-color: @sysnote-notice-bg;
+               color: @sysnote-notice-color;
        }
-}
-
-#typo3-dblist-sysnotes .single-note:hover {
-       .header,
-       .header span {
-               color: #d7d7d7;
+       .panel-sysnote-category-4 {
+               background-color: @sysnote-todo-bg;
+               color: @sysnote-todo-color;
        }
 }
 
-
index 95de5eb..9a7fb3f 100644 (file)
@@ -1538,6 +1538,36 @@ class IconRegistry implements \TYPO3\CMS\Core\SingletonInterface {
                                'source' => 'EXT:scheduler/ext_icon.png'
                        )
                ),
+               'sysnote-type-0' => array(
+                       'provider' => SvgIconProvider::class,
+                       'options' => array(
+                               'source' => 'EXT:backend/Resources/Public/Icons/App/apps-pagetree-root.svg',
+                       )
+               ),
+               'sysnote-type-1' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'cog'
+                       )
+               ),
+               'sysnote-type-2' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'code'
+                       )
+               ),
+               'sysnote-type-3' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'thumb-tack'
+                       )
+               ),
+               'sysnote-type-4' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'check-square'
+                       )
+               ),
 
                // Spinner
                'spinner-circle-dark' => array(
index 8de43ac..1d7d6b9 100644 (file)
@@ -23,11 +23,11 @@ return array(
                        'config' => array(
                                'type' => 'select',
                                'items' => array(
-                                       array('', '0'),
-                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.1', '1', 'EXT:sys_note/Resources/Public/Icons/instruction.png'),
-                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.3', '3', 'EXT:sys_note/Resources/Public/Icons/note.png'),
-                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.4', '4', 'EXT:sys_note/Resources/Public/Icons/todo.png'),
-                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.2', '2', 'EXT:sys_note/Resources/Public/Icons/template.png')
+                                       array('', '0', 'sysnote-type-0'),
+                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.1', '1', 'sysnote-type-1'),
+                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.3', '3', 'sysnote-type-3'),
+                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.4', '4', 'sysnote-type-4'),
+                                       array('LLL:EXT:sys_note/Resources/Private/Language/locallang_tca.xlf:sys_note.category.I.2', '2', 'sysnote-type-2')
                                ),
                                'default' => '0'
                        )
index 416cfd8..f2e1b82 100644 (file)
@@ -7,41 +7,42 @@
        <f:if condition="{notes}">
                <h2><f:translate key="internal_note" /></h2>
 
-               <div id="typo3-dblist-sysnotes">
+               <div class="typo3-dblist-sysnotes">
                        <f:for each="{notes}" as="note">
-                               <div class="single-note category-{note.category}">
-                                       <div class="header">
-                                               <span class="typeicon t3-js-clickmenutrigger" data-table="sys_note" data-uid="{note.uid}" data-listframe="1"></span>
-                                               <span><f:translate key="author" /></span>
-                                               <f:if condition="{note.author.realName}">
-                                                       <f:then>{note.author.realName}</f:then>
-                                                       <f:else>{note.author.userName}</f:else>
-                                               </f:if>
-
+                               <div class="panel panel-default panel-sysnote panel-sysnote-category-{note.category}">
+                                       <div class="panel-heading clearfix">
+                                               <span class="typeicon t3-js-clickmenutrigger" data-table="sys_note" data-uid="{note.uid}" data-listframe="1">
+                                                       <core:icon identifier="sysnote-type-{note.category}" />
+                                               </span>
+                                               <span class="author">
+                                                       <f:translate key="author" />
+                                                       <f:if condition="{note.author.realName}">
+                                                               <f:then>{note.author.realName}</f:then>
+                                                               <f:else>{note.author.userName}</f:else>
+                                                       </f:if>
+                                               </span>
                                                &nbsp; <span>&bull;</span> &nbsp;
-
-                                               <span><f:translate key="date" /></span>
-                                               <f:format.date>{note.modificationDate}</f:format.date>
-
+                                               <span class="date">
+                                                       <f:translate key="date" />
+                                                       <f:format.date>{note.modificationDate}</f:format.date>
+                                               </span>
                                                <f:if condition="{note.personal}">
                                                        &middot;
-                                                       <span><f:translate key="personal" /></span>&nbsp;<f:translate key="yes" />
+                                                       <span class="personal">
+                                                               <f:translate key="personal" />&nbsp;<f:translate key="yes" /></span>
                                                </f:if>
 
-                                               <div class="right icons">
-                                                       <a href="{notes:deleteLink(id:note.uid)}" class="t3js-modal-trigger" data-severity="warning" data-title="{f:translate(key: 'LLL:EXT:lang/locallang_common.xlf:delete')}" data-content="{f:translate(key: 'LLL:EXT:lang/locallang_alt_doc.xlf:deleteWarning')}" data-button-close-text="{f:translate(key: 'LLL:EXT:lang/locallang_common.xlf:cancel')}">
+                                               <div class="btn-group pull-right">
+                                                       <a href="{notes:deleteLink(id:note.uid)}" class="btn btn-default btn-sm t3js-modal-trigger" data-severity="warning" data-title="{f:translate(key: 'LLL:EXT:lang/locallang_common.xlf:delete')}" data-content="{f:translate(key: 'LLL:EXT:lang/locallang_alt_doc.xlf:deleteWarning')}" data-button-close-text="{f:translate(key: 'LLL:EXT:lang/locallang_common.xlf:cancel')}">
                                                                <core:icon identifier="actions-edit-delete" />
                                                        </a>
-                                                       <a href="{notes:editLink(id:note.uid)}">
+                                                       <a href="{notes:editLink(id:note.uid)}" class="btn btn-default btn-sm">
                                                                <core:icon identifier="actions-document-open" />
                                                        </a>
                                                </div>
                                        </div>
-                                       <div class="content">
-                                               <div class="title">
-                                                       <f:if condition="{note.category}"><f:translate key="category.{note.category}" />:</f:if>
-                                                       {note.subject}
-                                               </div>
+                                       <div class="panel-body">
+                                               <h4><span><f:if condition="{note.category}"><f:translate key="category.{note.category}" />: </f:if></span>{note.subject}</h4>
                                                <f:format.nl2br>{note.message}</f:format.nl2br>
                                        </div>
                                </div>
diff --git a/typo3/sysext/sys_note/Resources/Public/Icons/default.png b/typo3/sysext/sys_note/Resources/Public/Icons/default.png
deleted file mode 100644 (file)
index 3061a71..0000000
Binary files a/typo3/sysext/sys_note/Resources/Public/Icons/default.png and /dev/null differ
diff --git a/typo3/sysext/sys_note/Resources/Public/Icons/instruction.png b/typo3/sysext/sys_note/Resources/Public/Icons/instruction.png
deleted file mode 100644 (file)
index 1c4544d..0000000
Binary files a/typo3/sysext/sys_note/Resources/Public/Icons/instruction.png and /dev/null differ
diff --git a/typo3/sysext/sys_note/Resources/Public/Icons/note.png b/typo3/sysext/sys_note/Resources/Public/Icons/note.png
deleted file mode 100644 (file)
index 93210d0..0000000
Binary files a/typo3/sysext/sys_note/Resources/Public/Icons/note.png and /dev/null differ
diff --git a/typo3/sysext/sys_note/Resources/Public/Icons/template.png b/typo3/sysext/sys_note/Resources/Public/Icons/template.png
deleted file mode 100644 (file)
index 54f587b..0000000
Binary files a/typo3/sysext/sys_note/Resources/Public/Icons/template.png and /dev/null differ
diff --git a/typo3/sysext/sys_note/Resources/Public/Icons/todo.png b/typo3/sysext/sys_note/Resources/Public/Icons/todo.png
deleted file mode 100644 (file)
index ba2e0dc..0000000
Binary files a/typo3/sysext/sys_note/Resources/Public/Icons/todo.png and /dev/null differ
index ea41447..371e081 100644 (file)
@@ -13372,70 +13372,42 @@ iframe {
 #typo3-debug-console .messages p strong {
   padding-right: 4px;
 }
-#typo3-dblist-sysnotes {
+.typo3-dblist-sysnotes {
   margin-top: 15px;
 }
-#typo3-dblist-sysnotes .single-note {
-  margin-bottom: 12px;
-}
-#typo3-dblist-sysnotes .single-note .header {
-  min-height: 24px;
-  line-height: 24px;
-  background: #d7d7d7;
-  color: #000;
-  font-size: 0.9em;
-}
-#typo3-dblist-sysnotes .single-note .header span.typeicon {
-  width: 23px;
-  height: 24px;
-  margin-right: 7px;
-  display: block;
-  float: left;
-  cursor: pointer;
-  background: url(../../../../sys_note/Resources/Public/Icons/default.png) no-repeat top left;
-}
-#typo3-dblist-sysnotes .single-note .header .right.icons {
-  visibility: hidden;
-}
-#typo3-dblist-sysnotes .single-note .header .right {
-  float: right;
-  margin-right: 5px;
-}
-#typo3-dblist-sysnotes .single-note .header span {
-  color: #666;
+.typo3-dblist-sysnotes .panel-sysnote {
+  border: 0;
 }
-#typo3-dblist-sysnotes .single-note .content {
-  padding: 12px;
-  background: #fffeed;
-  border: 1px solid #dadada;
-  border-top: none;
-  color: #666;
+.typo3-dblist-sysnotes .panel-sysnote .panel-heading {
+  padding: 5px;
 }
-#typo3-dblist-sysnotes .single-note .content .title {
-  font-weight: bold;
-  margin-bottom: 6px;
+.typo3-dblist-sysnotes .panel-sysnote .panel-heading .typeicon {
+  padding: 4px 4px 12px 4px;
 }
-#typo3-dblist-sysnotes .single-note:hover .header {
-  background-color: #666;
+.typo3-dblist-sysnotes .panel-sysnote .panel-heading .typeicon .icon {
+  margin-top: 5px;
 }
-#typo3-dblist-sysnotes .single-note:hover .header .right.icons {
-  visibility: visible;
+.typo3-dblist-sysnotes .panel-sysnote .panel-body h4 {
+  margin-top: 0;
 }
-#typo3-dblist-sysnotes .category-1 .header span.typeicon {
-  background-image: url(../../../../sys_note/Resources/Public/Icons/instruction.png);
+.typo3-dblist-sysnotes .panel-sysnote .panel-body h4 span {
+  font-style: italic;
 }
-#typo3-dblist-sysnotes .category-2 .header span.typeicon {
-  background-image: url(../../../../sys_note/Resources/Public/Icons/template.png);
+.typo3-dblist-sysnotes .panel-sysnote-category-1 {
+  background-color: #ebf3fb;
+  color: #333333;
 }
-#typo3-dblist-sysnotes .category-3 .header span.typeicon {
-  background-image: url(../../../../sys_note/Resources/Public/Icons/note.png);
+.typo3-dblist-sysnotes .panel-sysnote-category-2 {
+  background-color: #fbefdd;
+  color: #333333;
 }
-#typo3-dblist-sysnotes .category-4 .header span.typeicon {
-  background-image: url(../../../../sys_note/Resources/Public/Icons/todo.png);
+.typo3-dblist-sysnotes .panel-sysnote-category-3 {
+  background-color: #f9f9f9;
+  color: #333333;
 }
-#typo3-dblist-sysnotes .single-note:hover .header,
-#typo3-dblist-sysnotes .single-note:hover .header span {
-  color: #d7d7d7;
+.typo3-dblist-sysnotes .panel-sysnote-category-4 {
+  background-color: #d1e2bd;
+  color: #333333;
 }
 .typo3-extensionmanager-headerRowLeft {
   float: left;