[TASK] Improve UI of readOnly in TCEforms
authorSteffen Ritter <info@rs-websystems.de>
Fri, 6 Jul 2012 11:45:30 +0000 (13:45 +0200)
committerHelmut Hummel <helmut.hummel@typo3.org>
Sat, 7 Jul 2012 09:10:46 +0000 (11:10 +0200)
New Design of Jens for readOnly fields applied to TCEforms.

Change-Id: I3b7987aa795778c2b77be18e8e7f9410e16eaaf2
Releases: 6.0
Resolves: #36967
Reviewed-on: http://review.typo3.org/12670
Tested-by: Philipp Gampe
Reviewed-by: Helmut Hummel
Tested-by: Helmut Hummel
t3lib/class.t3lib_tceforms.php
t3lib/stddb/tables.php
typo3/sysext/t3skin/images/icons/status/status-readonly.png [new file with mode: 0644]
typo3/sysext/t3skin/images/sprites/t3skin.png
typo3/sysext/t3skin/stylesheets/sprites/t3skin.css
typo3/sysext/t3skin/stylesheets/visual/element_tceforms.css

index b3efe0d..8da2589 100644 (file)
@@ -2448,9 +2448,6 @@ class t3lib_TCEforms {
         */
        function getSingleField_typeNone_render($config, $itemValue) {
 
-                       // Is colorScheme[0] the right value?
-               $divStyle = 'border:solid 1px ' . t3lib_div::modifyHTMLColorAll($this->colorScheme[0], -30) . ';' . $this->defStyle . $this->formElStyle('none') . ' background-color: ' . $this->colorScheme[0] . '; padding-left:1px;color:#555;';
-
                if ($config['format']) {
                        $itemValue = $this->formatValue($config, $itemValue);
                }
@@ -2481,8 +2478,9 @@ class t3lib_TCEforms {
                        $height = $rows * 12;
 
                        $item = '
-                               <div style="' . htmlspecialchars($divStyle . ' overflow:auto; height:' . $height . 'px; width:' . $width . 'px;') . '" class="' . htmlspecialchars($this->formElClass('none')) . '">' .
+                               <div style="overflow:auto; height:' . $height . 'px; width:' . $width . 'px;" class="t3-tceforms-fieldReadOnly">' .
                                        $itemValue .
+                                       t3lib_iconWorks::getSpriteIcon('status-status-readonly') .
                                        '</div>';
                } else {
                        if (!$config['pass_content']) {
@@ -2497,8 +2495,9 @@ class t3lib_TCEforms {
 
                                // Overflow:auto crashes mozilla here. Title tag is usefull when text is longer than the div box (overflow:hidden).
                        $item = '
-                               <div style="' . htmlspecialchars($divStyle . ' overflow:hidden; width:' . $width . 'px;') . '" class="' . htmlspecialchars($this->formElClass('none')) . '" title="' . $itemValue . '">' .
+                               <div style="overflow:hidden; width:' . $width . 'px;" class="t3-tceforms-fieldReadOnly" title="' . $itemValue . '">' .
                                        '<span class="nobr">' . (strcmp($itemValue, '') ? $itemValue : '&nbsp;') . '</span>' .
+                                       t3lib_iconWorks::getSpriteIcon('status-status-readonly') .
                                        '</div>';
                }
 
index 619e2c3..8ed5d17 100644 (file)
@@ -928,6 +928,7 @@ $GLOBALS['TBE_STYLES']['spriteIconApi']['coreSpriteImageNames'] = array(
        'status-status-locked',
        'status-status-permission-denied',
        'status-status-permission-granted',
+       'status-status-readonly',
        'status-status-reference-hard',
        'status-status-reference-soft',
        'status-status-workspace-draft',
@@ -993,6 +994,10 @@ $GLOBALS['TBE_STYLES']['spriteIconApi']['coreSpriteImageNames'] = array(
 );
 
 
+
+
+
+
 $GLOBALS['TBE_STYLES']['spriteIconApi']['spriteIconRecordOverlayPriorities'] = array(
        'deleted',
        'hidden',
diff --git a/typo3/sysext/t3skin/images/icons/status/status-readonly.png b/typo3/sysext/t3skin/images/icons/status/status-readonly.png
new file mode 100644 (file)
index 0000000..66ecdb6
Binary files /dev/null and b/typo3/sysext/t3skin/images/icons/status/status-readonly.png differ
index 300ecca..f963e03 100644 (file)
Binary files a/typo3/sysext/t3skin/images/sprites/t3skin.png and b/typo3/sysext/t3skin/images/sprites/t3skin.png differ
index 805cd14..e8f3054 100644 (file)
@@ -1,24 +1,24 @@
 
 .t3-icon-actions {
-       background-image: url('../../images/sprites/t3skin.png?1341568069') !important;
+       background-image: url('../../images/sprites/t3skin.png?1341574391') !important;
        height: 16px;
        width: 16px;
 }
 
 .t3-icon-apps {
-       background-image: url('../../images/sprites/t3skin.png?1341568069') !important;
+       background-image: url('../../images/sprites/t3skin.png?1341574391') !important;
        height: 16px;
        width: 16px;
 }
 
 .t3-icon-mimetypes {
-       background-image: url('../../images/sprites/t3skin.png?1341568069') !important;
+       background-image: url('../../images/sprites/t3skin.png?1341574391') !important;
        height: 16px;
        width: 16px;
 }
 
 .t3-icon-status {
-       background-image: url('../../images/sprites/t3skin.png?1341568069') !important;
+       background-image: url('../../images/sprites/t3skin.png?1341574391') !important;
        height: 16px;
        width: 16px;
 }
        background-position: -18px -234px !important;
 
 }
-.t3-icon-status-reference-hard {
+.t3-icon-status-readonly {
        background-position: -36px -234px !important;
 
 }
-.t3-icon-status-reference-soft {
+.t3-icon-status-reference-hard {
        background-position: -54px -234px !important;
 
 }
-.t3-icon-status-workspace-draft {
+.t3-icon-status-reference-soft {
        background-position: -72px -234px !important;
 
 }
-.t3-icon-system-extension-required {
+.t3-icon-status-workspace-draft {
        background-position: -90px -234px !important;
 
 }
-.t3-icon-user-admin {
+.t3-icon-system-extension-required {
        background-position: -108px -234px !important;
 
 }
-.t3-icon-user-backend {
+.t3-icon-user-admin {
        background-position: -126px -234px !important;
 
 }
-.t3-icon-user-frontend {
+.t3-icon-user-backend {
        background-position: -144px -234px !important;
 
 }
-.t3-icon-user-group-backend {
+.t3-icon-user-frontend {
        background-position: -162px -234px !important;
 
 }
-.t3-icon-user-group-frontend {
+.t3-icon-user-group-backend {
        background-position: -180px -234px !important;
 
 }
-.t3-icon-version-1 {
+.t3-icon-user-group-frontend {
        background-position: -198px -234px !important;
 
 }
+.t3-icon-version-1 {
+       background-position: -216px -234px !important;
+
+}
 .t3-icon-version-10 {
-       background-position: -36px -252px !important;
+       background-position: -54px -252px !important;
 
 }
 .t3-icon-version-11 {
-       background-position: -54px -252px !important;
+       background-position: -72px -252px !important;
 
 }
 .t3-icon-version-12 {
-       background-position: -72px -252px !important;
+       background-position: -90px -252px !important;
 
 }
 .t3-icon-version-13 {
-       background-position: -90px -252px !important;
+       background-position: -108px -252px !important;
 
 }
 .t3-icon-version-14 {
-       background-position: -108px -252px !important;
+       background-position: -126px -252px !important;
 
 }
 .t3-icon-version-15 {
-       background-position: -126px -252px !important;
+       background-position: -144px -252px !important;
 
 }
 .t3-icon-version-16 {
-       background-position: -144px -252px !important;
+       background-position: -162px -252px !important;
 
 }
 .t3-icon-version-17 {
-       background-position: -162px -252px !important;
+       background-position: -180px -252px !important;
 
 }
 .t3-icon-version-18 {
-       background-position: -180px -252px !important;
+       background-position: -198px -252px !important;
 
 }
 .t3-icon-version-19 {
-       background-position: -198px -252px !important;
+       background-position: -216px -252px !important;
 
 }
 .t3-icon-version-2 {
-       background-position: -216px -234px !important;
+       background-position: -234px -234px !important;
 
 }
 .t3-icon-version-20 {
-       background-position: -216px -252px !important;
+       background-position: -234px -252px !important;
 
 }
 .t3-icon-version-21 {
-       background-position: -234px -252px !important;
+       background-position: -252px -252px !important;
 
 }
 .t3-icon-version-22 {
-       background-position: -252px -252px !important;
+       background-position: -270px -252px !important;
 
 }
 .t3-icon-version-23 {
-       background-position: -270px -252px !important;
+       background-position: -288px -252px !important;
 
 }
 .t3-icon-version-24 {
-       background-position: -288px -252px !important;
+       background-position: -306px -252px !important;
 
 }
 .t3-icon-version-25 {
-       background-position: -306px -252px !important;
+       background-position: -0px -270px !important;
 
 }
 .t3-icon-version-26 {
-       background-position: -0px -270px !important;
+       background-position: -18px -270px !important;
 
 }
 .t3-icon-version-27 {
-       background-position: -18px -270px !important;
+       background-position: -36px -270px !important;
 
 }
 .t3-icon-version-28 {
-       background-position: -36px -270px !important;
+       background-position: -54px -270px !important;
 
 }
 .t3-icon-version-29 {
-       background-position: -54px -270px !important;
+       background-position: -72px -270px !important;
 
 }
 .t3-icon-version-3 {
-       background-position: -234px -234px !important;
+       background-position: -252px -234px !important;
 
 }
 .t3-icon-version-30 {
-       background-position: -72px -270px !important;
+       background-position: -90px -270px !important;
 
 }
 .t3-icon-version-31 {
-       background-position: -90px -270px !important;
+       background-position: -108px -270px !important;
 
 }
 .t3-icon-version-32 {
-       background-position: -108px -270px !important;
+       background-position: -126px -270px !important;
 
 }
 .t3-icon-version-33 {
-       background-position: -126px -270px !important;
+       background-position: -144px -270px !important;
 
 }
 .t3-icon-version-34 {
-       background-position: -144px -270px !important;
+       background-position: -162px -270px !important;
 
 }
 .t3-icon-version-35 {
-       background-position: -162px -270px !important;
+       background-position: -180px -270px !important;
 
 }
 .t3-icon-version-36 {
-       background-position: -180px -270px !important;
+       background-position: -198px -270px !important;
 
 }
 .t3-icon-version-37 {
-       background-position: -198px -270px !important;
+       background-position: -216px -270px !important;
 
 }
 .t3-icon-version-38 {
-       background-position: -216px -270px !important;
+       background-position: -234px -270px !important;
 
 }
 .t3-icon-version-39 {
-       background-position: -234px -270px !important;
+       background-position: -252px -270px !important;
 
 }
 .t3-icon-version-4 {
-       background-position: -252px -234px !important;
+       background-position: -270px -234px !important;
 
 }
 .t3-icon-version-40 {
-       background-position: -252px -270px !important;
+       background-position: -270px -270px !important;
 
 }
 .t3-icon-version-41 {
-       background-position: -270px -270px !important;
+       background-position: -288px -270px !important;
 
 }
 .t3-icon-version-42 {
-       background-position: -288px -270px !important;
+       background-position: -306px -270px !important;
 
 }
 .t3-icon-version-43 {
-       background-position: -306px -270px !important;
+       background-position: -0px -288px !important;
 
 }
 .t3-icon-version-44 {
-       background-position: -0px -288px !important;
+       background-position: -18px -288px !important;
 
 }
 .t3-icon-version-45 {
-       background-position: -18px -288px !important;
+       background-position: -36px -288px !important;
 
 }
 .t3-icon-version-46 {
-       background-position: -36px -288px !important;
+       background-position: -54px -288px !important;
 
 }
 .t3-icon-version-47 {
-       background-position: -54px -288px !important;
+       background-position: -72px -288px !important;
 
 }
 .t3-icon-version-48 {
-       background-position: -72px -288px !important;
+       background-position: -90px -288px !important;
 
 }
 .t3-icon-version-49 {
-       background-position: -90px -288px !important;
+       background-position: -108px -288px !important;
 
 }
 .t3-icon-version-5 {
-       background-position: -270px -234px !important;
+       background-position: -288px -234px !important;
 
 }
 .t3-icon-version-50 {
-       background-position: -108px -288px !important;
+       background-position: -126px -288px !important;
 
 }
 .t3-icon-version-6 {
-       background-position: -288px -234px !important;
+       background-position: -306px -234px !important;
 
 }
 .t3-icon-version-7 {
-       background-position: -306px -234px !important;
+       background-position: -0px -252px !important;
 
 }
 .t3-icon-version-8 {
-       background-position: -0px -252px !important;
+       background-position: -18px -252px !important;
 
 }
 .t3-icon-version-9 {
-       background-position: -18px -252px !important;
+       background-position: -36px -252px !important;
 
 }
 .t3-icon-version-no-version {
-       background-position: -126px -288px !important;
+       background-position: -144px -288px !important;
 
 }
 .t3-icon-warning-in-use {
-       background-position: -144px -288px !important;
+       background-position: -162px -288px !important;
 
 }
 .t3-icon-warning-lock {
-       background-position: -162px -288px !important;
+       background-position: -180px -288px !important;
 
 }
index dc54214..c75680d 100644 (file)
@@ -456,3 +456,20 @@ TCEforms Sections
        text-indent: 0px;
        background-position-x: 5px;
 }
+
+.t3-tceforms-fieldReadOnly {
+    padding:5px;
+    border:1px solid #cccccc;
+    background: #f4f4f4;
+    color: #696362;
+    -webkit-box-shadow: inset 0px 0px 5px 0px #e8e8e8;
+    box-shadow: inset 0px 0px 5px 0px #e8e8e8;
+    padding-right:21px;
+    position:relative;
+}
+
+.t3-tceforms-fieldReadOnly span.t3-icon {
+    position:absolute;
+    right:3px;
+    top:4px;
+}
\ No newline at end of file