[TASK] Styling for the distribution management 15/28615/7
authorErnesto Baschny <ernst@cron-it.de>
Sat, 22 Mar 2014 20:22:15 +0000 (21:22 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 23 Mar 2014 13:59:35 +0000 (14:59 +0100)
The distribution management looks ugly. Make it usable
and not just a raw list.

Resolves: #57139
Releases: 6.2
Change-Id: I95eb8dca3cd6b3915839736d18ff3d78e746a30a
Reviewed-on: https://review.typo3.org/28615
Reviewed-by: Wouter Wolters
Tested-by: Wouter Wolters
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/extensionmanager/Resources/Private/Language/locallang.xlf
typo3/sysext/extensionmanager/Resources/Private/Partials/List/Distribution.html
typo3/sysext/extensionmanager/Resources/Private/Scss/helpers/_mixins.scss
typo3/sysext/extensionmanager/Resources/Private/Scss/main.scss
typo3/sysext/extensionmanager/Resources/Private/Scss/page/_distribution.scss [new file with mode: 0644]
typo3/sysext/extensionmanager/Resources/Private/Scss/var/_settings.scss [new file with mode: 0644]
typo3/sysext/extensionmanager/Resources/Private/Templates/List/Distributions.html
typo3/sysext/extensionmanager/Resources/Public/Css/main.css
typo3/sysext/extensionmanager/Resources/Public/Images/Distribution.png
typo3/sysext/extensionmanager/Resources/Public/JavaScript/main.js

index 7668db5..07c942f 100644 (file)
                                <source>Read online</source>
                        </trans-unit>
                        <trans-unit id="extensionList.distribution.key" xml:space="preserve">
-                               <source>Distribution Key:</source>
+                               <source>Key:</source>
+                       </trans-unit>
+                       <trans-unit id="extensionList.distribution.author" xml:space="preserve">
+                               <source>Author:</source>
+                       </trans-unit>
+                       <trans-unit id="extensionList.distribution.title" xml:space="preserve">
+                       <source>Title:</source>
+                       </trans-unit>
+                       <trans-unit id="extensionList.distribution.version" xml:space="preserve">
+                               <source>Version:</source>
+                       </trans-unit>
+                       <trans-unit id="extensionList.distribution.lastUpdated" xml:space="preserve">
+                               <source>Last Update:</source>
+                       </trans-unit>
+                       <trans-unit id="extensionList.officialDistribution" xml:space="preserve">
+                               <source>Official distribution</source>
                        </trans-unit>
                        <trans-unit id="distributions" xml:space="preserve">
                                <source>Get preconfigured distribution</source>
                        </trans-unit>
                        <trans-unit id="extensionList.installDistribution" xml:space="preserve">
-                               <source>Install distribution</source>
+                               <source>Install</source>
                        </trans-unit>
                        <trans-unit id="extensionList.updateFromTer.label" xml:space="preserve">
                                <source>Retrieving Extension-List from TYPO3 Extension Repository (TER)</source>
index 167cb65..71fadf0 100644 (file)
@@ -1,21 +1,39 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 <div class="distribution">
-       <div class="distributionInner">
-               <div class="distributionName"><h2>{distribution.title}</h2></div>
-               <div class="distributionImage">
-                       <em:image
+       <div class="distribution-image">
+               <em:image
                                src="EXT:{distribution.extensionKey}/Resources/Public/Images/Distribution.png" alt="{distribution.title}"
                                fallbackImage="EXT:extensionmanager/Resources/Public/Images/Distribution.png"
-                               height="150px"
-                               width="220px"
-                               />
+                               height="225px"
+                               width="300px"
+                       />
+               <div class="distribution-hover">
+                       <div class="distribution-hover-inner">
+                               <dl class="distribution-info">
+                                        <dt><f:translate key="extensionList.distribution.title" /></dt>
+                                       <dd>{distribution.title}</dd>
+                                       <dt><f:translate key="extensionList.distribution.key" /></dt>
+                                       <dd>{distribution.extensionKey}</dd>
+                                       <dt><f:translate key="extensionList.distribution.version" /></dt>
+                                       <dd>{distribution.version} (<f:format.date format="d.m.Y">{distribution.lastUpdated}</f:format.date>)</dd>
+                                       <dt><f:translate key="extensionList.distribution.author" /></dt>
+                                       <dd>{distribution.authorName}</dd>
+                               </dl>
+                               <div class="distributionDescription">{distribution.description}</div>
+                       </div>
                </div>
-               <div class="distributionKey"><strong><f:translate key="extensionList.distribution.key" /> </strong>{distribution.extensionKey}</div>
-               <div class="distributionDescription expandable">{distribution.description} </div>
-               <div class="distributionInstall">
-                       <f:link.action action="installDistribution" controller="Download" arguments="{extension:distribution}">
-                               <f:translate key="extensionList.installDistribution">Install Distribution</f:translate>
+       </div>
+       <div class="distribution-meta">
+               <h2 class="distribution-title">{distribution.title}</h2>
+               <div class="distribution-install">
+                       <f:link.action action="installDistribution" controller="Download" arguments="{extension:distribution}" class="t3-button t3-button-action-installdistribution">
+                               <span class="t3-icon t3-icon-actions t3-icon-system-extension-import">&nbsp;</span><f:translate key="extensionList.installDistribution">Install</f:translate>
                        </f:link.action>
+                       <f:if condition="{official}">
+                               <span class="distribution-official">
+                                       <f:translate key="extensionList.officialDistribution">Official Distribution</f:translate>
+                               </span>
+                       </f:if>
                </div>
        </div>
 </div>
\ No newline at end of file
index b9dc6d7..0cce7ff 100644 (file)
@@ -1,18 +1,32 @@
 // SASS MIXINS
 $useIEFilters: 0;
 
+// clearfix
+@mixin clearfix {
+       &:before,
+       &:after {
+               content: " "; // 1
+               display: table; // 2
+       }
+       &:after {
+               clear: both;
+       }
+}
+
+// border-radius
 @mixin border-radius ($values) {
        -webkit-border-radius: $values;
           -moz-border-radius: $values;
-               border-radius: $values;
+               border-radius: $values;
 }
 
+// box-shadow
 @mixin box-shadow ($values) {
        -webkit-box-shadow: $values;
-               box-shadow: $values;
+               box-shadow: $values;
 }
 
-
+// linear-gradient
 @mixin linear-gradient($preset, $from, $to, $ie: $useIEFilters) {
        background-color: $preset;
        background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
@@ -27,6 +41,7 @@ $useIEFilters: 0;
        }
 }
 
+// rotate
 @mixin rotate ($deg) {
        -webkit-transform: rotate(#{$deg}deg);
           -moz-transform: rotate(#{$deg}deg);
@@ -35,6 +50,7 @@ $useIEFilters: 0;
                transform: rotate(#{$deg}deg);
 }
 
+// scale
 @mixin scale ($size) {
        -webkit-transform: scale(#{$size});
           -moz-transform: scale(#{$size});
@@ -43,6 +59,7 @@ $useIEFilters: 0;
                transform: scale(#{$size});
 }
 
+// transform
 @mixin transform ($values) {
        -webkit-transform: #{$values};
           -moz-transform: #{$values};
@@ -51,6 +68,7 @@ $useIEFilters: 0;
                transform: #{$values};
 }
 
+// transition
 @mixin transition ($value) {
        -webkit-transition: $value;
           -moz-transition: $value;
@@ -59,7 +77,6 @@ $useIEFilters: 0;
                transition: $value;
 }
 
-
 // box-sizing
 @mixin box-sizing ($type: border-box) {
        -webkit-box-sizing: $type;
@@ -72,6 +89,7 @@ $useIEFilters: 0;
        @include transform(translate3d(0,0,0) #{$values});
 }
 
+// colors
 @mixin alpha { color: #f14400; }
 @mixin beta { color: #f4bd00; }
 @mixin stable { color: #3db900; }
index 36d4f3a..c78d38c 100644 (file)
@@ -7,6 +7,9 @@
  *
  */
 
+// Import Variables
+@import "var/settings";
+
 // Some helpers
 @import "helpers/mixins";
 
@@ -16,5 +19,5 @@
 // Appearance of the page
 @import "page/base",
                "page/manage",
-               "page/get";
-
+               "page/get",
+               "page/distribution";
\ No newline at end of file
diff --git a/typo3/sysext/extensionmanager/Resources/Private/Scss/page/_distribution.scss b/typo3/sysext/extensionmanager/Resources/Private/Scss/page/_distribution.scss
new file mode 100644 (file)
index 0000000..377b0de
--- /dev/null
@@ -0,0 +1,89 @@
+.distribution {
+       border: 1px solid darken($gray-lighter,15%);
+       background-color: $gray-lighter;
+       margin-bottom: 20px;
+       margin-left: 20px;
+       width: 300px;
+       float: left;
+       &:hover {
+               background-color: darken($gray-lighter,3%);
+               .distribution-hover {
+                       top: 0px;
+                       opacity: 1;
+               }
+       }
+}
+.distribution-holder {
+       @include clearfix;
+       top: 0px;
+       bottom: 0px;
+       margin-left: -20px;
+}
+.distribution-image {
+       position: relative;
+       width: 300px;
+       height: 225px;
+       overflow: hidden;
+       img {
+               display: block;
+               height: 100%;
+               width: 100%;
+       }
+}
+.distribution-hover {
+       background-color: $gray-lighter;
+       position: absolute;
+       top: 100%;
+       left: 0px;
+       width: 300px;
+       height: 225px;
+       overflow: hidden;
+       opacity: 0;
+       @include transition(all 0.2s ease-in-out);
+}
+.distribution-hover-inner {
+       padding: 15px;
+}
+.distribution-meta {
+       border-top: 1px solid darken($gray-lighter,10%);
+       padding: 15px;
+       .distribution-title {
+               margin: 0;
+               overflow: hidden;
+               white-space: nowrap;
+               text-overflow: ellipsis;
+               font-size: 14px;
+       }
+       .distribution-install {
+               margin-top: 0.5em;
+       }
+       .t3-button {
+               margin: 0;
+               padding-right: 8px;
+       }
+       .distribution-official {
+               border: 1px solid $brand-color;
+               background-color: $brand-color;
+               border-radius: 2px;
+               display: inline-block;
+               padding: 3px 8px;
+               vertical-align: middle;
+               color: #FFFFFF;
+       }
+}
+.distribution-info {
+       @include clearfix();
+       margin-top: 0;
+       dt {
+               font-weight: bold;
+               float: left;
+               width: 60px;
+               clear: left;
+               overflow: hidden;
+               text-overflow: ellipsis;
+               white-space: nowrap;
+       }
+       dd {
+               margin-left: 70px;
+       }
+}
diff --git a/typo3/sysext/extensionmanager/Resources/Private/Scss/var/_settings.scss b/typo3/sysext/extensionmanager/Resources/Private/Scss/var/_settings.scss
new file mode 100644 (file)
index 0000000..21e717f
--- /dev/null
@@ -0,0 +1,8 @@
+// Colors
+$gray-darker:     lighten(#000000, 13.5%);  // #222222
+$gray-dark:       lighten(#000000, 20%);    // #333333
+$gray:            lighten(#000000, 33.5%);  // #555555
+$gray-medium:     lighten(#000000, 60%);    // #999999
+$gray-light:      lighten(#000000, 92%);    // #EBEBEB
+$gray-lighter:    lighten(#000000, 98%);    // #FAFAFA
+$brand-color:     #ff8600;
\ No newline at end of file
index b922419..a224b4c 100644 (file)
 
 <f:section name="Content">
        <f:flashMessages renderMode="div" />
+       <div class="distribution-holder">
        <f:for each="{officialDistributions}" as="distribution">
-               <f:render partial="List/Distribution" arguments="{distribution: distribution}" />
+               <f:render partial="List/Distribution" arguments="{distribution: distribution, official: 1}" />
        </f:for>
-       <hr />
        <f:for each="{communityDistributions}" as="distribution">
-               <f:render partial="List/Distribution" arguments="{distribution: distribution}" />
+               <f:render partial="List/Distribution" arguments="{distribution: distribution, official: 0}" />
        </f:for>
+       </div>
 </f:section>
\ No newline at end of file
index 50f9139..40334f5 100644 (file)
@@ -338,3 +338,95 @@ span.ter-ext-state-alpha {
 
 #typo3-docbody form.download {
   margin-bottom: 0; }
+
+.distribution {
+  border: 1px solid #d4d4d4;
+  background-color: #fafafa;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  width: 300px;
+  float: left; }
+  .distribution:hover {
+    background-color: #f2f2f2; }
+    .distribution:hover .distribution-hover {
+      top: 0px;
+      opacity: 1; }
+
+.distribution-holder {
+  top: 0px;
+  bottom: 0px;
+  margin-left: -20px; }
+  .distribution-holder:before, .distribution-holder:after {
+    content: " ";
+    display: table; }
+  .distribution-holder:after {
+    clear: both; }
+
+.distribution-image {
+  position: relative;
+  width: 300px;
+  height: 225px;
+  overflow: hidden; }
+  .distribution-image img {
+    display: block;
+    height: 100%;
+    width: 100%; }
+
+.distribution-hover {
+  background-color: #fafafa;
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  width: 300px;
+  height: 225px;
+  overflow: hidden;
+  opacity: 0;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out; }
+
+.distribution-hover-inner {
+  padding: 15px; }
+
+.distribution-meta {
+  border-top: 1px solid #e0e0e0;
+  padding: 15px; }
+  .distribution-meta .distribution-title {
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px; }
+  .distribution-meta .distribution-install {
+    margin-top: 0.5em; }
+  .distribution-meta .t3-button {
+    margin: 0;
+    padding-right: 8px; }
+  .distribution-meta .distribution-official {
+    border: 1px solid #ff8600;
+    background-color: #ff8600;
+    border-radius: 2px;
+    display: inline-block;
+    padding: 3px 8px;
+    vertical-align: middle;
+    color: #FFFFFF; }
+
+.distribution-info {
+  margin-top: 0; }
+  .distribution-info:before, .distribution-info:after {
+    content: " ";
+    display: table; }
+  .distribution-info:after {
+    clear: both; }
+  .distribution-info dt {
+    font-weight: bold;
+    float: left;
+    width: 60px;
+    clear: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  .distribution-info dd {
+    margin-left: 70px; }
index 00e4cc4..86dc7c5 100644 (file)
Binary files a/typo3/sysext/extensionmanager/Resources/Public/Images/Distribution.png and b/typo3/sysext/extensionmanager/Resources/Public/Images/Distribution.png differ
index 8004666..c85801e 100644 (file)
                                $(this).parent().css('z-index', 1);
                        }
                });
+
+               $('.t3-button-action-installdistribution').click(function(){
+                       $('.typo3-extension-manager').mask();
+               });
+
        });
 
        function getUrlVars() {