[TASK] Style the "add irre item" button 21/27221/5
authorFrans Saris <franssaris@gmail.com>
Fri, 31 Jan 2014 22:23:13 +0000 (23:23 +0100)
committerBenjamin Mack <benni@typo3.org>
Sun, 2 Feb 2014 09:05:07 +0000 (10:05 +0100)
This changes styles the buttons to add a new irre item like
the button to add images to a content element.

This patch also unifies button styles.

Resolves: #55539, #53218
Releases: 6.2
Change-Id: Ib07e51cfc6b6675671e1c6a2afd7bb0ebe379e1e
Reviewed-on: https://review.typo3.org/27221
Reviewed-by: Stefan Froemken
Tested-by: Stefan Froemken
Reviewed-by: Marcin Sągol
Tested-by: Marcin Sągol
Reviewed-by: Benjamin Mack
Tested-by: Benjamin Mack
typo3/sysext/backend/Classes/Form/Element/InlineElement.php
typo3/sysext/t3skin/Resources/Public/Css/structure/main_form.css
typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_list.css
typo3/sysext/t3skin/Resources/Public/Css/visual/element_tceforms.css
typo3/sysext/t3skin/Resources/Public/Css/visual/main_form.css

index 6f4a132..30bf4e6 100644 (file)
@@ -294,11 +294,11 @@ class InlineElement {
                        if ($language > 0 && $row[$GLOBALS['TCA'][$table]['ctrl']['transOrigPointerField']] > 0) {
                                // Add the "Localize all records" link before all child records:
                                if (isset($config['appearance']['showAllLocalizationLink']) && $config['appearance']['showAllLocalizationLink']) {
-                                       $levelLinks .= $this->getLevelInteractionLink('localize', $nameObject . self::Structure_Separator . $foreign_table, $config);
+                                       $levelLinks .= ' ' . $this->getLevelInteractionLink('localize', $nameObject . self::Structure_Separator . $foreign_table, $config);
                                }
                                // Add the "Synchronize with default language" link before all child records:
                                if (isset($config['appearance']['showSynchronizationLink']) && $config['appearance']['showSynchronizationLink']) {
-                                       $levelLinks .= $this->getLevelInteractionLink('synchronize', $nameObject . self::Structure_Separator . $foreign_table, $config);
+                                       $levelLinks .= ' ' . $this->getLevelInteractionLink('synchronize', $nameObject . self::Structure_Separator . $foreign_table, $config);
                                }
                        }
                }
@@ -853,9 +853,8 @@ class InlineElement {
                        } else {
                                $createNewRelationText = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.createNewRelation', TRUE);
                        }
-                       $item .= '<a href="#" onclick="' . htmlspecialchars($onChange) . '" align="abstop">' . IconUtility::getSpriteIcon('actions-document-new', array('title' => $createNewRelationText)) . $createNewRelationText . '</a>';
-                       // Wrap the selector and add a spacer to the bottom
-                       $item = '<div style="margin-bottom: 20px;">' . $item . '</div>';
+                       $item .= ' <a href="#" class="t3-button" onclick="' . htmlspecialchars($onChange) . '" align="abstop">' . IconUtility::getSpriteIcon('actions-document-new', array('title' => $createNewRelationText)) . $createNewRelationText . '</a>';
+                       $item = '<div class="t3-form-field-group">' . $item . '</div>';
                }
                return $item;
        }
@@ -890,7 +889,7 @@ class InlineElement {
                }
                $browserParams = '|||' . $allowed . '|' . $objectPrefix . '|inline.checkUniqueElement||inline.importElement';
                $onClick = 'setFormValueOpenBrowser(\'' . $mode . '\', \'' . $browserParams . '\'); return false;';
-               $item = '<a href="#" onclick="' . htmlspecialchars($onClick) . '">' . IconUtility::getSpriteIcon('actions-insert-record', array('title' => $createNewRelationText)) . $createNewRelationText . '</a>';
+               $item = '<a href="#" class="t3-button" onclick="' . htmlspecialchars($onClick) . '">' . IconUtility::getSpriteIcon('actions-insert-record', array('title' => $createNewRelationText)) . $createNewRelationText . '</a>';
                return $item;
        }
 
@@ -911,7 +910,7 @@ class InlineElement {
                                $title = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.createnew', TRUE);
                                $icon = 'actions-document-new';
                                $className = 'typo3-newRecordLink';
-                               $attributes['class'] = 'inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'];
+                               $attributes['class'] = 't3-button inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'];
                                $attributes['onclick'] = 'return inline.createNewRecord(\'' . $objectPrefix . '\')';
                                if (isset($conf['inline']['inlineNewButtonStyle']) && $conf['inline']['inlineNewButtonStyle']) {
                                        $attributes['style'] = $conf['inline']['inlineNewButtonStyle'];
@@ -926,13 +925,14 @@ class InlineElement {
                                $title = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_misc.xlf:localizeAllRecords', 1);
                                $icon = 'actions-document-localize';
                                $className = 'typo3-localizationLink';
+                               $attributes['class'] = 't3-button';
                                $attributes['onclick'] = 'return inline.synchronizeLocalizeRecords(\'' . $objectPrefix . '\', \'localize\')';
                                break;
                        case 'synchronize':
                                $title = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_misc.xlf:synchronizeWithOriginalLanguage', TRUE);
                                $icon = 'actions-document-synchronize';
                                $className = 'typo3-synchronizationLink';
-                               $attributes['class'] = 'inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'];
+                               $attributes['class'] = 't3-button inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'];
                                $attributes['onclick'] = 'return inline.synchronizeLocalizeRecords(\'' . $objectPrefix . '\', \'synchronize\')';
                                break;
                }
index 9bc6189..fbfc150 100644 (file)
@@ -138,7 +138,7 @@ div#typo3-newRecordLink,
 div.typo3-newRecordLink,
 div.typo3-localizationLink,
 div.typo3-synchronizationLink {
-       margin: 5px 0px 5px 0px;
+       display: inline;
 }
 
 div#typo3-newRecordLink img,
index 7fe189b..bdf3504 100644 (file)
@@ -495,6 +495,7 @@ TCEforms Sections
 .t3-form-field-item {
        position: relative;
        border: 1px solid transparent;
+       padding: 7px 0;
 }
 
 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
index a519cb7..79ced28 100644 (file)
@@ -1,12 +1,6 @@
 /* - - - - - - - - - - - - - - - - - - - - -
 Form
 - - - - - - - - - - - - - - - - - - - - - */
-
-textarea.fixed-font {
-       font-family: "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", monospace;
-}
-
-.t3-button,
 input,
 textarea,
 button {
@@ -15,41 +9,79 @@ button {
        border-radius: 2px;
 }
 
+textarea.fixed-font {
+       font-family: "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", monospace;
+}
+
 textarea:hover {
        border: 1px solid #737f91;
 }
 
+.checkbox,
+.checkbox:hover,
+input[type="checkbox"] {
+       background: none;
+       border: none;
+       cursor: pointer;
+}
+
+/* - - - - - - - - - - - - - - - - - - - - -
+Buttons
+- - - - - - - - - - - - - - - - - - - - - */
 .t3-button,
 button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-       background-color: #f6f6f6;
-       background-image: url('../../../../images/backgrounds/button.png');
-       background-image: linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%);
-       background-image: -moz-linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%);
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #f6f6f6), color-stop(0.9, #d5d5d5));
-       background-position: bottom;
-       background-repeat: repeat-x;
-       color: #434343;
+       font-size: 12px;
+       line-height: 1.5em;
+       display: inline-block;
+       margin-bottom: 0;
+       font-weight: normal;
+       text-align: center;
+       vertical-align: middle;
        cursor: pointer;
+       background-image: none;
+       white-space: nowrap;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+        -o-user-select: none;
+       user-select: none;
+       border-radius: 2px;
+       text-decoration: none!important;
+       padding: 6px 10px;
+       background-color: #E0E0E0;
+       border: 1px solid #7c7c7c;
+       color: #434343;
 }
 
 .t3-button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
 input[type="button"]:hover {
-       background-color: #c8c8c8;
-       background-image: url('../../../../images/backgrounds/button-hover.png');
-       background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
-       background-image: -moz-linear-gradient(center top, #f6f6f6 10%, #bdbcbc 90%);
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #f6f6f6), color-stop(0.9, #c8c8c8));
-       background-position: bottom;
-       background-repeat: repeat-x;
-       border: 1px solid #737f91;
-       color: #1e1e1e;
-       cursor: pointer;
-       text-decoration: none;
+       background-color: #cccccc;
+       text-decoration: none!important;
+}
+
+.t3-button span.t3-icon {
+       margin-top: -3px;
+       margin-right: 5px;
+}
+
+.t3-button.disabled {
+       cursor: default;
+       opacity: 0.5;
+}
+
+.t3-button.active,
+.t3-button:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+input[type="button"]:active {
+       outline: 0;
+       -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+       box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
 }
 
 .t3-button.disabled,
@@ -60,14 +92,17 @@ input[type="button"][disabled="disabled"],
 input[type="submit"][disabled="disabled"]:hover,
 input[type="reset"][disabled="disabled"]:hover,
 input[type="button"][disabled="disabled"]:hover {
+       pointer-events: none;
        cursor: default;
        opacity: 0.5;
+       filter: ~"alpha(opacity=@50)";
+       -webkit-box-shadow: none;
+       box-shadow: none;
 }
 
-.checkbox,
-.checkbox:hover,
-input[type="checkbox"] {
-       background: none;
-       border: none;
-       cursor: pointer;
+/* - - - - - - - - - - - - - - - - - - - - -
+Groups
+- - - - - - - - - - - - - - - - - - - - - */
+.t3-form-field-group {
+       margin-bottom:  1.5em;
 }
\ No newline at end of file