[FEATURE][UX] Install Tool usability and visual enhancements 87/24187/6
authorErnesto Baschny <ernst@cron-it.de>
Thu, 19 Sep 2013 06:42:59 +0000 (08:42 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Tue, 1 Oct 2013 16:12:54 +0000 (18:12 +0200)
* Restyle toggle-groups with a more t3skin-like visual.
* Restyle "All configuration":
  * no more "green success boxes" per item, but instead
    alternating background.
  * no more horizontal rulers in between.
  * Clicking in the explanatory text in some item will focus the
    corresponding input-field.
* Submit buttons in "All Configuration" and "Configuration
  Presets" are now always visible due to them sticking to the
  bottom of the scrollable area.
* Use CSS3 gradients in buttons instead of background images.

Related: #52087
Resolves: #38701
Releases: 6.2
Change-Id: I1abfb42273bcb9f60c3feef9fcfbb411585c63bf
Reviewed-on: https://review.typo3.org/24187
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
25 files changed:
typo3/sysext/install/Resources/Private/Partials/Action/Common/SubmitButton.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/AllConfiguration/SubSection.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/CleanUp/Typo3TempFiles.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Charset.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Context.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/ExtbaseObjectCache.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Image.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/TestSetup/AboutImageHandling.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/TestSetup/CurrentConfiguration.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/TestSetup/VerifyTestResults.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/AllConfiguration.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/Configuration.html
typo3/sysext/install/Resources/Public/Images/Background/Button.jpg [deleted file]
typo3/sysext/install/Resources/Public/Images/Background/ButtonHover.jpg [deleted file]
typo3/sysext/install/Resources/Public/Images/Icon/Save.png [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-dark.png [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-white.png [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Images/Icon/arrowdown.png [deleted file]
typo3/sysext/install/Resources/Public/Images/Icon/arrowright-dark.png [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Images/Icon/arrowright-white.png [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Images/Icon/arrowright.png [deleted file]
typo3/sysext/install/Resources/Public/Javascript/Install.js [changed mode: 0755->0644]
typo3/sysext/install/Resources/Public/Stylesheets/Action/Common/Install.css
typo3/sysext/install/Resources/Public/Stylesheets/Action/Step/General.css
typo3/sysext/install/Resources/Public/Stylesheets/BackendModule/ShowEnableInstallToolButton.css

index 6719ff7..4d67be4 100644 (file)
@@ -2,6 +2,7 @@
        <ol>
                <li>
                        <button
+                                       class="btn {className}"
                                        type="submit"
                                        name="install[set][{name}]"
                                        >
index d7905eb..35583bf 100644 (file)
@@ -2,25 +2,20 @@
 
 <div class="toggleGroup">
        <div class="toggleButton">
-               <h4><strong>Section: $TYPO3_CONF_VARS['{sectionName}']</strong></h4>
+               <h4><strong>$TYPO3_CONF_VARS['{sectionName}']</strong></h4>
        </div>
-       <p></p>
 
        <div class="toggleData" style="display:none">
                <f:for each="{sectionData}" as="item">
-                       <div class="typo3-message message-ok" >
-                               <div class="header-container">
-                                       <div class="message-header">
-                                               <strong>[{sectionName}][{item.key}] </strong>
-                                               <f:if condition="{item.value}">
-                                                       = {item.value -> i:format.crop(maxCharacters: 40)}
-                                               </f:if>
-                                       </div>
-                               </div>
-                               <div class="message-body">
+                       <div class="item">
+                               <strong>[{sectionName}][{item.key}] </strong>
+                               <f:if condition="{item.value}">
+                                       = {item.value -> i:format.crop(maxCharacters: 40)}
+                               </f:if>
+                               <div class="item-description">
                                        {item.description -> f:format.raw()}
-                                       <br />
-
+                               </div>
+                               <div class="item-value">
                                        <f:if condition="{item.type} == 'textarea'">
                                                <textarea
                                                        rows="5"
@@ -60,9 +55,6 @@
                                        </f:if>
                                </div>
                        </div>
-                       <p></p>
                </f:for>
        </div>
 </div>
-
-<hr />
\ No newline at end of file
index 0e25083..14d1f9d 100644 (file)
@@ -5,22 +5,24 @@
                <h4>About</h4>
        </div>
        <div class="toggleData" style="display:none">
-               <p>
-                       TYPO3 uses this directory for temporary files, mainly processed and cached images.
-                       The filenames are cryptic. They are unique representations of the file properties
-                       made by md5-hashing a serialized array with information.
-               </p>
-               <p>
-                       Anyway this directory may contain many thousand files and a lot of them may be of no use anymore.
-               </p>
-               <p>
-                       With this action you can delete the files in this folder. When you do that, you
-                       should also clear the cache database tables afterwards.
-               </p>
-               <p>
-                       This tool will delete files only if the last 10 characters before the extension
-                       (3 chars+'.') are hexadecimal valid ciphers, which are lowercase a-f and 0-9.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               TYPO3 uses this directory for temporary files, mainly processed and cached images.
+                               The filenames are cryptic. They are unique representations of the file properties
+                               made by md5-hashing a serialized array with information.
+                       </p>
+                       <p>
+                               Anyway this directory may contain many thousand files and a lot of them may be of no use anymore.
+                       </p>
+                       <p>
+                               With this action you can delete the files in this folder. When you do that, you
+                               should also clear the cache database tables afterwards.
+                       </p>
+                       <p>
+                               This tool will delete files only if the last 10 characters before the extension
+                               (3 chars+'.') are hexadecimal valid ciphers, which are lowercase a-f and 0-9.
+                       </p>
+               </div>
        </div>
 </div>
 
index c80f237..dfdcc01 100644 (file)
@@ -4,17 +4,17 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       Charset conversion is done at various places in the TYPO3 CMS core
-                       and can lead to massive performance problems if not set right. In
-                       general the first available setting should be selected for maximum
-                       performance and least problems.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               Charset conversion is done at various places in the TYPO3 CMS core
+                               and can lead to massive performance problems if not set right. In
+                               general the first available setting should be selected for maximum
+                               performance and least problems.
+                       </p>
 
-               <f:for each="{feature.presetsOrderedByPriority}" as="preset">
-                       <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
-               </f:for>
+                       <f:for each="{feature.presetsOrderedByPriority}" as="preset">
+                               <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
+                       </f:for>
+               </div>
        </div>
 </div>
-
-<hr />
\ No newline at end of file
index 4ee1b64..4f3241a 100644 (file)
@@ -4,27 +4,27 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       TYPO3 can be run in a specific application context by using one of the
-                       built-in contexts "Production" (default), "Development" or "Testing".
-                       This can be used to provide specific configuration sets for each context.
-                       The context can be defined with the environment variable "TYPO3_CONTEXT"
-                       which is usually set through your webserver configuration (e.g. in htaccess).
-               </p>
-               <p>
-                       However, if you don't set a context environment variable, you can still
-                       use the install tool to select a configuration preset for "Production"
-                       or "Development" context. The goal is to configure a production instance
-                       with maximum performance and no debug output that is possibly shown to users,
-                       while development instances should enable error output. The configuration
-                       preset for "Production" is set by default.
-                       As a third alternative, you can enter a custom configuration.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               TYPO3 can be run in a specific application context by using one of the
+                               built-in contexts "Production" (default), "Development" or "Testing".
+                               This can be used to provide specific configuration sets for each context.
+                               The context can be defined with the environment variable "TYPO3_CONTEXT"
+                               which is usually set through your webserver configuration (e.g. in htaccess).
+                       </p>
+                       <p>
+                               However, if you don't set a context environment variable, you can still
+                               use the install tool to select a configuration preset for "Production"
+                               or "Development" context. The goal is to configure a production instance
+                               with maximum performance and no debug output that is possibly shown to users,
+                               while development instances should enable error output. The configuration
+                               preset for "Production" is set by default.
+                               As a third alternative, you can enter a custom configuration.
+                       </p>
 
-               <f:for each="{feature.presetsOrderedByPriority}" as="preset">
-                       <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
-               </f:for>
+                       <f:for each="{feature.presetsOrderedByPriority}" as="preset">
+                               <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
+                       </f:for>
+               </div>
        </div>
 </div>
-
-<hr />
\ No newline at end of file
index 6262075..4746bd6 100644 (file)
@@ -4,21 +4,21 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       To speed up object instantiation Extbase stores some cache data. This can lead
-                       to lots of SELECT database queries on each page hit if the cache is configured
-                       to use the default database cache backend.
-               </p>
-               <p>
-                       This cache can not grow very big, it uses no tagging and is used multiple times
-                       for one request. These characteristics make it well suited to be used in
-                       combination with a APC cache backend.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               To speed up object instantiation Extbase stores some cache data. This can lead
+                               to lots of SELECT database queries on each page hit if the cache is configured
+                               to use the default database cache backend.
+                       </p>
+                       <p>
+                               This cache can not grow very big, it uses no tagging and is used multiple times
+                               for one request. These characteristics make it well suited to be used in
+                               combination with a APC cache backend.
+                       </p>
 
-               <f:for each="{feature.presetsOrderedByPriority}" as="preset">
-                       <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
-               </f:for>
+                       <f:for each="{feature.presetsOrderedByPriority}" as="preset">
+                               <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
+                       </f:for>
+               </div>
        </div>
 </div>
-
-<hr />
\ No newline at end of file
index 67eee57..21815a8 100644 (file)
@@ -4,34 +4,34 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       Advanced image handling in TYPO3 CMS uses the command line tools
-                       GraphicsMagick or ImageMagick. The tools need to be configured
-                       correctly depending on the version that is available on the system.
-               </p>
-               <p>
-                       This module detects the available image handling versions and sets
-                       the system accordingly. If everything is correctly set up the image
-                       tests of the install tool section "Test setup" should be fine.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               Advanced image handling in TYPO3 CMS uses the command line tools
+                               GraphicsMagick or ImageMagick. The tools need to be configured
+                               correctly depending on the version that is available on the system.
+                       </p>
+                       <p>
+                               This module detects the available image handling versions and sets
+                               the system accordingly. If everything is correctly set up the image
+                               tests of the install tool section "Test setup" should be fine.
+                       </p>
 
-               <p>
-                       If ImageMagick or GraphicsMagick executables are located at some
-                       not standard place, add the absolute directory name here.
-               </p>
-               <p>
-                       <input
-                               type="input"
-                               name="install[values][{feature.name}][additionalSearchPath]"
-                               value="{feature.additionalSearchPath}"
-                       />
-                       <button type="submit" name="install[set][ImageSearch]">Find executables in this directory</button>
-               </p>
+                       <p>
+                               If ImageMagick or GraphicsMagick executables are located at some
+                               not standard place, add the absolute directory name here.
+                       </p>
+                       <p>
+                               <input
+                                       type="input"
+                                       name="install[values][{feature.name}][additionalSearchPath]"
+                                       value="{feature.additionalSearchPath}"
+                               />
+                               <button type="submit" name="install[set][ImageSearch]">Find executables in this directory</button>
+                       </p>
 
-               <f:for each="{feature.presetsOrderedByPriority}" as="preset">
-                       <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
-               </f:for>
+                       <f:for each="{feature.presetsOrderedByPriority}" as="preset">
+                               <f:render partial="Action/Tool/Configuration/{feature.name}/{preset.name}" arguments="{_all}" />
+                       </f:for>
+               </div>
        </div>
 </div>
-
-<hr />
\ No newline at end of file
index 287e05a..120fb4c 100644 (file)
@@ -6,55 +6,57 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       TYPO3 is known for its ability to process images on the server.
-               </p>
-               <p>
-                       In the backend interface (TBE) thumbnails are automatically generated
-                       (by ImageMagick in thumbs.php) as well as icons, menu items and pane tabs (by GDLib).
-                       In the frontend all kinds of graphical elements are processed. Typically images are
-                       scaled down to fit the pages (by ImageMagick) and menu items, graphical headers and
-                       such are generated automatically (by GDLib + ImageMagick). In addition TYPO3 is able
-                       to handle many file formats (thanks to ImageMagick), for example TIF, BMP, PCX, TGA,
-                       AI and PDF in addition to the standard web formats; JPG, GIF, PNG.
-               </p>
-               <p>
-                       In order to do this, TYPO3 uses two sets of tools:
-               </p>
-               <strong>
-                       ImageMagick / GraphicsMagick:
-               </strong>
-               <p>
-                       For conversion of non-web formats to webformats, combining images with alpha-masks,
-                       performing image-effects like blurring and sharpening.
-               </p>
-               <p>
-                       ImageMagick is a collection of external programs on the server called by the exec()
-                       function in PHP. TYPO3 uses three of these, namely 'convert' (converting fileformats,
-                       scaling, effects), 'combine'/'composite' (combining images with masks) and 'identify'
-                       (returns image information). GraphicsMagick is an alternative to ImageMagick and can
-                       be enabled by setting [GFX][im_version_5] to 'gm'. This is recommended and enabled
-                       by default. Because ImageMagick and Graphicsmagick are external programs, a requirement
-                       must be met: The programs must be installed on the server and working. ImageMagick is
-                       available for both Windows and Unix. The current version is 6+. ImageMagick homepage is
-                       at <a href="http://www.imagemagick.org/">http://www.imagemagick.org/</a>
-               </p>
-               <strong>
-                       GDLib:
-               </strong>
-               <p>
-                       For drawing boxes and rendering text on images with truetype fonts. Also used for
-                       icons, menuitems and generally the TypoScript GIFBUILDER object is based on GDlib,
-                       but extensively utilizing ImageMagick to process intermediate results.
-               </p>
-               <p>
-                       GDLib is accessed through internal functions in PHP, you'll need a version of PHP
-                       with GDLib compiled in. Also in order to use TrueType fonts with GDLib you'll
-                       need FreeType compiled in as well.
-               </p>
-               <p>
-                       You can disable all image processing options in TYPO3 ([GFX][image_processing]=0),
-                       but that would seriously disable TYPO3.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               TYPO3 is known for its ability to process images on the server.
+                       </p>
+                       <p>
+                               In the backend interface (TBE) thumbnails are automatically generated
+                               (by ImageMagick in thumbs.php) as well as icons, menu items and pane tabs (by GDLib).
+                               In the frontend all kinds of graphical elements are processed. Typically images are
+                               scaled down to fit the pages (by ImageMagick) and menu items, graphical headers and
+                               such are generated automatically (by GDLib + ImageMagick). In addition TYPO3 is able
+                               to handle many file formats (thanks to ImageMagick), for example TIF, BMP, PCX, TGA,
+                               AI and PDF in addition to the standard web formats; JPG, GIF, PNG.
+                       </p>
+                       <p>
+                               In order to do this, TYPO3 uses two sets of tools:
+                       </p>
+                       <strong>
+                               ImageMagick / GraphicsMagick:
+                       </strong>
+                       <p>
+                               For conversion of non-web formats to webformats, combining images with alpha-masks,
+                               performing image-effects like blurring and sharpening.
+                       </p>
+                       <p>
+                               ImageMagick is a collection of external programs on the server called by the exec()
+                               function in PHP. TYPO3 uses three of these, namely 'convert' (converting fileformats,
+                               scaling, effects), 'combine'/'composite' (combining images with masks) and 'identify'
+                               (returns image information). GraphicsMagick is an alternative to ImageMagick and can
+                               be enabled by setting [GFX][im_version_5] to 'gm'. This is recommended and enabled
+                               by default. Because ImageMagick and Graphicsmagick are external programs, a requirement
+                               must be met: The programs must be installed on the server and working. ImageMagick is
+                               available for both Windows and Unix. The current version is 6+. ImageMagick homepage is
+                               at <a href="http://www.imagemagick.org/">http://www.imagemagick.org/</a>
+                       </p>
+                       <strong>
+                               GDLib:
+                       </strong>
+                       <p>
+                               For drawing boxes and rendering text on images with truetype fonts. Also used for
+                               icons, menuitems and generally the TypoScript GIFBUILDER object is based on GDlib,
+                               but extensively utilizing ImageMagick to process intermediate results.
+                       </p>
+                       <p>
+                               GDLib is accessed through internal functions in PHP, you'll need a version of PHP
+                               with GDLib compiled in. Also in order to use TrueType fonts with GDLib you'll
+                               need FreeType compiled in as well.
+                       </p>
+                       <p>
+                               You can disable all image processing options in TYPO3 ([GFX][image_processing]=0),
+                               but that would seriously disable TYPO3.
+                       </p>
+               </div>
        </div>
 </div>
\ No newline at end of file
index 158cf03..75fe845 100644 (file)
@@ -6,69 +6,71 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <dl class="t3-install-definitionlist">
-                       <dt>
-                               {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} enabled:
-                       </dt>
-                       <dd>
-                               {f:if(condition:imageConfiguration.imageMagickEnabled, then:'Yes', else:'No')}
-                       </dd>
+               <div class="toggleDataContent">
+                       <dl class="t3-install-definitionlist">
+                               <dt>
+                                       {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} enabled:
+                               </dt>
+                               <dd>
+                                       {f:if(condition:imageConfiguration.imageMagickEnabled, then:'Yes', else:'No')}
+                               </dd>
 
-                       <dt>
-                               ImageMagick or GraphicsMagick:
-                       </dt>
-                       <dd>
-                               {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')}
-                       </dd>
+                               <dt>
+                                       ImageMagick or GraphicsMagick:
+                               </dt>
+                               <dd>
+                                       {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')}
+                               </dd>
 
-                       <dt>
-                               {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} path:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.imageMagickPath}
-                       </dd>
+                               <dt>
+                                       {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} path:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.imageMagickPath}
+                               </dd>
 
-                       <dt>
-                               {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} version:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.imageMagickVersion}
-                       </dd>
+                               <dt>
+                                       {f:if(condition:'{imageConfiguration.imageMagickOrGraphicsMagick} == \'im\'', then:'ImageMagick', else:'GrapicsMagick')} version:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.imageMagickVersion}
+                               </dd>
 
-                       <dt>
-                               IM5 effects enabled:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.imageMagick5Effecs} <span>(Blurring/Sharpening with IM 5+)</span>
-                       </dd>
+                               <dt>
+                                       IM5 effects enabled:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.imageMagick5Effecs} <span>(Blurring/Sharpening with IM 5+)</span>
+                               </dd>
 
-                       <dt>
-                               GDLib enabled:
-                       </dt>
-                       <dd>
-                               {f:if(condition:imageConfiguration.gdlibEnabled, then:'Yes', else:'No')}
-                       </dd>
+                               <dt>
+                                       GDLib enabled:
+                               </dt>
+                               <dd>
+                                       {f:if(condition:imageConfiguration.gdlibEnabled, then:'Yes', else:'No')}
+                               </dd>
 
-                       <dt>
-                               GDLib using PNG:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.gdlibPng}
-                       </dd>
+                               <dt>
+                                       GDLib using PNG:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.gdlibPng}
+                               </dd>
 
-                       <dt>
-                               Freetype DPI:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.freeTypeDpi} <span>(Should be 96 for Freetype 2)</span>
-                       </dd>
+                               <dt>
+                                       Freetype DPI:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.freeTypeDpi} <span>(Should be 96 for Freetype 2)</span>
+                               </dd>
 
-                       <dt>
-                               File Formats:
-                       </dt>
-                       <dd>
-                               {imageConfiguration.fileFormats}
-                       </dd>
-               </dl>
+                               <dt>
+                                       File Formats:
+                               </dt>
+                               <dd>
+                                       {imageConfiguration.fileFormats}
+                               </dd>
+                       </dl>
+               </div>
        </div>
 </div>
index cef9156..b10a714 100644 (file)
@@ -6,18 +6,20 @@
        </div>
 
        <div class="toggleData" style="display:none">
-               <p>
-                       This page performs image processing and displays the result. It's a thorough check
-                       that everything you've configured is working correctly.
-               </p>
-               <p>
-                       It's quite simple to verify your installation; Just look down the page, the images
-                       in pairs should look like each other. If some images are not alike, something is
-                       wrong. You may also notice warnings and errors if this tool found signs of any problems.
-               </p>
-               <p>
-                       The image to the left is the reference image (how it should be) and to the right
-                       the image made by your server.
-               </p>
+               <div class="toggleDataContent">
+                       <p>
+                               This page performs image processing and displays the result. It's a thorough check
+                               that everything you've configured is working correctly.
+                       </p>
+                       <p>
+                               It's quite simple to verify your installation; Just look down the page, the images
+                               in pairs should look like each other. If some images are not alike, something is
+                               wrong. You may also notice warnings and errors if this tool found signs of any problems.
+                       </p>
+                       <p>
+                               The image to the left is the reference image (how it should be) and to the right
+                               the image made by your server.
+                       </p>
+               </div>
        </div>
 </div>
\ No newline at end of file
index 2d57405..d956431 100644 (file)
@@ -46,7 +46,9 @@
                                        </f:if>
                                </f:for>
 
-                               <f:render partial="Action/Common/SubmitButton" arguments="{name:'write', text:'Write configuration'}"/>
+                               <div id="fixed-footer-fieldset">
+                                       <f:render partial="Action/Common/SubmitButton" arguments="{name:'write', text:'Write configuration', className:'btn-save'}"/>
+                               </div>
                        </form>
                </f:else>
        </f:if>
index aa32bb9..96d4723 100644 (file)
@@ -14,8 +14,6 @@
                based on your system setup.
        </p>
 
-       <hr />
-
        <form method="post">
                <f:render partial="Action/Common/HiddenFormFields" arguments="{_all}" />
 
@@ -23,6 +21,9 @@
                        <f:render partial="Action/Tool/Configuration/{feature.name}" arguments="{_all}" />
                </f:for>
 
-               <f:render partial="Action/Common/SubmitButton" arguments="{name:'activate', text:'Activate'}"/>
+               <div id="fixed-footer-fieldset">
+                       <f:render partial="Action/Common/SubmitButton" arguments="{name:'activate', text:'Activate', className:'btn-save'}"/>
+               </div>
+
        </form>
 </f:section>
\ No newline at end of file
diff --git a/typo3/sysext/install/Resources/Public/Images/Background/Button.jpg b/typo3/sysext/install/Resources/Public/Images/Background/Button.jpg
deleted file mode 100644 (file)
index 5d6d6b8..0000000
Binary files a/typo3/sysext/install/Resources/Public/Images/Background/Button.jpg and /dev/null differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Background/ButtonHover.jpg b/typo3/sysext/install/Resources/Public/Images/Background/ButtonHover.jpg
deleted file mode 100644 (file)
index 648041d..0000000
Binary files a/typo3/sysext/install/Resources/Public/Images/Background/ButtonHover.jpg and /dev/null differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/Save.png b/typo3/sysext/install/Resources/Public/Images/Icon/Save.png
new file mode 100644 (file)
index 0000000..e5f720f
Binary files /dev/null and b/typo3/sysext/install/Resources/Public/Images/Icon/Save.png differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-dark.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-dark.png
new file mode 100644 (file)
index 0000000..d273a2a
Binary files /dev/null and b/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-dark.png differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-white.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-white.png
new file mode 100644 (file)
index 0000000..e88fa54
Binary files /dev/null and b/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown-white.png differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown.png
deleted file mode 100644 (file)
index d273a2a..0000000
Binary files a/typo3/sysext/install/Resources/Public/Images/Icon/arrowdown.png and /dev/null differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-dark.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-dark.png
new file mode 100644 (file)
index 0000000..cec4484
Binary files /dev/null and b/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-dark.png differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-white.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-white.png
new file mode 100644 (file)
index 0000000..625c3dd
Binary files /dev/null and b/typo3/sysext/install/Resources/Public/Images/Icon/arrowright-white.png differ
diff --git a/typo3/sysext/install/Resources/Public/Images/Icon/arrowright.png b/typo3/sysext/install/Resources/Public/Images/Icon/arrowright.png
deleted file mode 100644 (file)
index cec4484..0000000
Binary files a/typo3/sysext/install/Resources/Public/Images/Icon/arrowright.png and /dev/null differ
old mode 100755 (executable)
new mode 100644 (file)
index 0065820..7d0e6ea
@@ -37,6 +37,7 @@ $(document).ready(function() {
                $toggleGroup = $(this).closest('.toggleGroup');
                $toggleGroup.toggleClass('expanded');
                $toggleGroup.find('.toggleData').toggle();
+               handleButtonScrolling();
        });
 
        // Simple password strength indicator
@@ -89,8 +90,34 @@ $(document).ready(function() {
                e.preventDefault();
                return false;
        });
+
+       // Focus input field on click on item-div around it
+       $('.toggleGroup .item').on('click', function() {
+               $(this).find('input').focus();
+       });
+
+       if ($('#fixed-footer-fieldset').length > 0) {
+               $(window).scroll(handleButtonScrolling);
+               $('body.backend #typo3-docbody').scroll(handleButtonScrolling);
+       }
 });
 
+function handleButtonScrolling() {
+       if (!isScrolledIntoView($('#fixed-footer-fieldset'))) {
+               $('#fixed-footer-fieldset fieldset').addClass('fixed');
+       } else {
+               $('#fixed-footer-fieldset fieldset').removeClass('fixed');
+       }
+}
+function isScrolledIntoView(elem) {
+       var docViewTop = $(window).scrollTop();
+       var docViewBottom = docViewTop + $(window).height();
+       var elemTop = $(elem).offset().top;
+       var elemBottom = elemTop + $(elem).height();
+
+       return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
+}
+
 /**
  * Checks extension compatibility by trying to load ext_tables and ext_localconf
  * via ajax.
index b401102..0d1ed0b 100644 (file)
@@ -227,13 +227,24 @@ button {
        font-size: 1.1em;
        padding: 0.3em 0.6em;
        border: 1px solid #7c7c7c;
-       background: #f6f6f6 url('../../../Images/Background/Button.jpg') repeat-x left bottom;
+       background-color: #f6f6f6;
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #dadada 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#dadada));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#dadada 100%);
        cursor: pointer;
 }
 
 button:hover {
        background-color: #ededed;
-       background-image: url('../../../Images/Background/ButtonHover.jpg');
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
 }
 
 button span {
@@ -431,12 +442,69 @@ button span.t3-install-form-button-icon-negative {
 }
 
 #t3-install-box-body .toggleButton {
-    background: url('../../../Images/Icon/arrowright.png') no-repeat;
-    padding-left: 20px;
-    cursor: pointer;
+       background-image: url('../../../Images/Icon/arrowright-white.png');
+       background-repeat: no-repeat;
+       background-position-y: 8px;
+       background-position-x: 3px;
+       padding-left: 20px;
+       cursor: pointer;
+}
+
+#t3-install-box-body .toggleButton h4 {
+       border: 1px solid transparent;
+}
+
+#t3-install-box-body .expanded .toggleButton h4 {
+       border: none;
 }
+
 #t3-install-box-body .expanded .toggleButton {
-    background-image: url('../../../Images/Icon/arrowdown.png');
+       background-image: url('../../../Images/Icon/arrowdown-white.png');
+       border-bottom: 1px solid #666;
+}
+
+.toggleGroup {
+       margin: 1em 0;
+}
+
+#t3-install-box-body .toggleButton:hover {
+       background-color: #666;
+       color: #fff;
+}
+.toggleGroup .toggleButton {
+       background-color: #cacaca;
+       padding: 0.5em 0;
+}
+
+.toggleGroup.expanded .toggleButton {
+       background-color: #666;
+       color: white;
+       padding: 0.5em 0;
+}
+
+.toggleGroup.expanded {
+       border: 1px solid #a2aab8;
+}
+
+.toggleGroup .toggleDataContent {
+       padding: 0 1em;
+}
+
+.item {
+       padding: 1em 1em;
+}
+.item:nth-child(odd) {
+       background-color: #f7f7f7;
+}
+.item:hover {
+       background-color: #dedede;
+}
+h4.item-header {
+       font-weight: normal;
+}
+.item-description {
+       line-height: 1.4em;
+       margin: 0.5em 0;
 }
 
 #t3-install-box-body .fieldNote {
@@ -683,4 +751,54 @@ body.standalone .t3-install-login h2 {
        clear: both;
        margin: 0;
        padding: 0.5em 0 0.5em 3.35em;
-}
\ No newline at end of file
+}
+
+button.btn-save {
+       background-image: url('../../../Images/Icon/Save.png');
+       background-repeat: no-repeat;
+       background-position: 5px 4px, 0 0;
+       background-image: url('../../../Images/Icon/Save.png'), -moz-linear-gradient(top,  #f6f6f6 0%, #dadada 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#dadada));
+       background-image: url('../../../Images/Icon/Save.png'), -webkit-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -o-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -ms-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background-image: url('../../../Images/Icon/Save.png'), linear-gradient(to bottom,  #f6f6f6 0%,#dadada 100%);
+       padding-left: 25px;
+}
+
+button.btn-save:hover {
+       background-color: #ededed;
+       background-image: url('../../../Images/Icon/Save.png'), -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
+       background-image: url('../../../Images/Icon/Save.png'), -webkit-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -o-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background-image: url('../../../Images/Icon/Save.png'), -ms-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background-image: url('../../../Images/Icon/Save.png'), linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
+}
+
+#fixed-footer-fieldset fieldset li {
+       margin: 0 0;
+}
+#fixed-footer-fieldset fieldset {
+       margin: 0em -1.8em;
+       color: #fff;
+       text-align: center;
+       padding: 0.5em 0;
+}
+
+#fixed-footer-fieldset fieldset.fixed {
+       width: 51.7em;
+       bottom: 0;
+       position: fixed;
+       background-color: #666;
+}
+
+.standalone #fixed-footer-fieldset fieldset.fixed {
+       background-color: #dadada;
+       border-right: 1px solid #dadada;
+}
+
+#fixed-footer-fieldset {
+       height: 41px;
+       margin-top: 2em;
+}
index 4f57615..8162b73 100644 (file)
@@ -229,12 +229,24 @@ button {
        font-size: 1.1em;
        padding: 0.3em 0.6em;
        border: 1px solid #7c7c7c;
-       background: #f6f6f6 url('../../../Images/Background/Button.jpg') repeat-x left bottom;
+       background-color: #f6f6f6;
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #dadada 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#dadada));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#dadada 100%);
        cursor: pointer;
 }
 
 button:hover {
-       background: #ededed url('../../../Images/Background/ButtonHover.jpg');
+       background-color: #ededed;
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
 }
 
 button span {
index 963ddec..a45a022 100644 (file)
@@ -9,16 +9,27 @@
        font-size: 16px;
 }
 
-form#t3-install-form-unlock button {
-       background: url("../../Images/Background/Button.jpg") repeat-x scroll left bottom #F6F6F6;
-       border: 1px solid #7C7C7C;
+button {
        color: #606060;
-       cursor: pointer;
        font-size: 1.1em;
        padding: 0.3em 0.6em;
-       margin-top: 1em;
+       border: 1px solid #7c7c7c;
+       background-color: #f6f6f6;
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #dadada 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#dadada));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#dadada 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#dadada 100%);
+       cursor: pointer;
 }
 
-form#t3-install-form-unlock button:hover {
-       background: #EDEDED url("../../Images/Background/ButtonHover.jpg");
-}
\ No newline at end of file
+button:hover {
+       background-color: #ededed;
+       background: -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
+       background: -webkit-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -o-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: -ms-linear-gradient(top,  #f6f6f6 0%,#aaa 100%);
+       background: linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
+}