Plug-in list page overhaul

Also some changes to pageNavigation (note that the page navigation on
the plug-in list page generates invalid code -> the title-attribute is
defect!)

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 531a3f22e1544919cb256bcded6ab711fb238353..b5e5c60dc585cc3e41516e222775aee920a900cb 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -1758,6 +1758,14 @@ tr .columnURL {
 
 /* ToDo */
 
+.pageNavigation ul li:not(href):not(.active) {
+       cursor: pointer;
+}
+
+.pageNavigation ul li:not(:first-child) {
+       margin-left: 3px;
+}
+
 .pageNavigation ul li:not(.children) {
        border-radius: 3px;
        display: inline-block;
@@ -2329,11 +2337,25 @@ input[type='button'],
        background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
        background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
        
-       -webkit-transition: all .1s linear;
-       -moz-transition: all .1s linear;
-       -ms-transition: all .1s linear;
-       -o-transition: all .1s linear;
-       transition: all .1s linear;
+       -webkit-transition-property: border, box-shadow, background-color, background-image, color;
+       -webkit-transition-duration: .1s;
+       -webkit-transition-timing-function: linear;
+       
+       -moz-transition-property: border, box-shadow, background-color, background-image, color;
+       -moz-transition-duration: .1s;
+       -moz-transition-timing-function: linear;
+       
+       -ms-transition-property: border, box-shadow, background-color, background-image, color;
+       -ms-transition-duration: .1s;
+       -ms-transition-timing-function: linear;
+       
+       -o-transition-property: border, box-shadow, background-color, background-image, color;
+       -o-transition-duration: .1s;
+       -o-transition-timing-function: linear;
+       
+       transition-property: border, box-shadow, background-color, background-image, color;
+       transition-duration: .1s;
+       transition-timing-function: linear;
 }
 
 /* Hover State */
@@ -2837,11 +2859,13 @@ div.scrollableContainer > div:first-child p {
 .userNotificationDetails li {
        cursor: pointer;
        border: 1px solid rgba(192, 192, 192, 1) !important;
+       
        background-image: -webkit-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1));
        background-image: -moz-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1));
        background-image: -ms-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1));
        background-image: -o-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1));
        background-image: linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1));
+       
        padding: 3px;
        display: inline-block;
 }
@@ -2879,7 +2903,7 @@ div.scrollableContainer > div:first-child p {
        position: relative;
 }
 
-.infoPackageStandalone .packageStandaloneIcon {
+.infoPackageStandalone img.packageStandaloneIcon {
        position: absolute;
        top: 30px;
        left: 25px;
@@ -2887,62 +2911,205 @@ div.scrollableContainer > div:first-child p {
        height: 96px;
 }
 
-.infoPackageStandalone section {
+.infoPackageStandalone div {
        margin-bottom: -15px;
        margin-left: 30px;
 }
 
-/* Footer */
-
 .infoPackageStandalone footer {
        position: relative;
        right: -15px;
        bottom: -15px;
 }
 
-.infoPackageStandalone footer nav {
+/* -- -- -- Package Plugin -- -- -- */
+
+/* Globals */
+
+.infoPackagePlugin {
+       text-align: center;
+       border: 1px solid rgba(204, 204, 204, 1);
+       border-radius: 7px;
+       background-color: rgba(0, 0, 0, .015);
+       margin-top: 15px;
+       display: inline-block;
+       position: relative;
+       width: 150px;
+       height: 150px;
+       overflow: hidden;
+       
+       -webkit-transition: background, border, color .1s linear;
+       -moz-transition: background, border, color .1s linear;
+       -ms-transition: background, border, color .1s linear;
+       -o-transition: background, border, color .1s linear;
+       transition: background, border, color .1s linear;
+}
+
+.infoPackagePlugin a {
+       text-decoration: none;
+}
+
+.infoPackagePlugin > div > a {
+       color: #999;
+       background-size: 96px;
+       background-position: center center;
+       background-repeat: no-repeat;
+       margin: 1px;
+       display: block;
+       position: relative;
+       width: 148px;
+       height: 148px;
+}
+
+.infoPackagePlugin:hover > div > a {
+       color: #666;
+}
+
+.infoPackagePlugin > div > a > h1 {
+       font-size: 100%;
+       font-weight: bold;
+       text-shadow: 0 1px 0 #fff;
+       word-wrap: break-word;
+       border-bottom: 1px solid rgba(204, 204, 204, 1);
+       
+       background-color: rgba(0, 0, 0, .015);
+       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       
+       margin: 0 -1px;
+       padding: 3px 1px;
+       display: block;
+       position: relative;
+       z-index: 100;
+}
+
+.infoPackagePlugin footer {
+       position: absolute;
+       bottom: 0;
+       width: 100%;
+}
+
+.infoPackagePlugin > div > a > small {
+       font-size: 85%;
+       font-weight: normal;
+       text-shadow: none;
+       border-radius: 7px;
+       padding: 40px 5px;
+       display: block;
+       position: absolute;
+       top: 0;
+       bottom: 0;
+       width: 139px;
+       opacity: 0;
+       
+       -webkit-transition: all .1s linear;
+       -moz-transition: all .1s linear;
+       -ms-transition: all .1s linear;
+       -o-transition: all .1s linear;
+       transition: all .1s linear;
+}
+
+.infoPackagePlugin:hover > div > a > small {
+       background-color: rgba(255, 255, 255, .9);
+       z-index: 10;
+       opacity: 1;
+}
+
+/* SmallButtonBar */
+
+.infoPackagePlugin .smallButtonBar {
+       text-align: center !important;
+       border-top: 1px solid rgba(204, 204, 204, 1);
+       border-radius: 0 0 7px 7px;
+       
+       background-color: rgba(0, 0, 0, .015);
+       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       
+       padding: 3px;
+       position: relative;
+       z-index: 100;
+}
+
+.infoPackagePlugin .smallButtonBar li {
+       display: inline;
+       position: relative;
+}
+
+.infoPackagePlugin .smallButtonBar li span {
+       /* removes the caption of the buttons */
+       position: absolute;
+       left: -9000px;
+       top: -9000px;
+       width: 0;
+}
+
+
+
+/* -- -- -- Package Footers -- -- -- */
+
+.infoPackageStandalone footer nav,
+.infoPackagePlugin footer nav {
        text-align: right;
        opacity: 0;
        
-       -webkit-transition: all .2s linear;
-       -moz-transition: all .2s linear;
-       -ms-transition: all .2s linear;
-       -o-transition: all .2s linear;
-       transition: all .2s linear;
+       -webkit-transition: all .1s linear;
+       -moz-transition: all .1s linear;
+       -ms-transition: all .1s linear;
+       -o-transition: all .1s linear;
+       transition: all .1s linear;
 }
 
-.infoPackageStandalone:hover footer nav {
+.infoPackageStandalone:hover footer nav,
+.infoPackagePlugin:hover footer nav {
        opacity: 1;
 }
 
-/* Small Buttons */
 
-.infoPackageStandalone footer nav ul.smallButtons {
+
+
+
+
+
+
+
+
+/* ############## ToDo: Small Buttons ############## */
+
+/* Globals */
+
+ul.smallButtons {
        list-style-type: none;
        margin-right: -1px;
        margin-bottom: -1px;
 }
 
-.infoPackageStandalone footer nav ul.smallButtons > li {
+ul.smallButtons > li {
        margin-left: -5px;
        display: inline-block;
 }
 
-.infoPackageStandalone footer nav ul.smallButtons > li > a {
+ul.smallButtons > li > a {
        white-space: nowrap;
        padding: 3px 7px;
        display: block;
 }
 
-.infoPackageStandalone footer nav ul.smallButtons > li.separator > a {
+ul.smallButtons > li.separator > a {
        border-right: 1px dotted #bcd;
 }
 
-.infoPackageStandalone footer nav ul.smallButtons > li:first-child > a {
+ul.smallButtons > li:first-child > a {
        border-top-left-radius: 13px;
 }
 
-.infoPackageStandalone footer nav ul.smallButtons > li:last-child > a {
+ul.smallButtons > li:last-child > a {
        border-bottom-right-radius: 7px;
 }
 

diff --git a/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl b/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl
index 90827ba55d4239e3857923502ae2ee43025740d0..5752a5aa47c64e1058226ee6c11abe16ba73afe8 100644 (file)
--- a/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl
+++ b/wcfsetup/install/files/acp/templates/optionTypeCustomselect.tpl
@@ -6,6 +6,6 @@
        {/foreach}
        <li>
                <label><input type="radio" name="values[{$option->optionName}]"{if $value == $customValue} checked="checked"{/if} value="" /></label>
-               <input type="text" id="{$option->optionName}_custom" name="values[{$option->optionName}_custom]" value="{$customValue}" class="inputText" />
+               <input type="text" id="{$option->optionName}_custom" name="values[{$option->optionName}_custom]" value="{$customValue}" class="medium" />
        </li>
 </ul>
\ No newline at end of file

diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index a6d21b796655137378fa116645a815ab1976ade8..9447610af2e98b77ed664e6d67d39542d2e93801 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -41,7 +41,7 @@
                                
                                <img src="{@RELATIVE_WCF_DIR}icon/wcfIcon1.svg" alt="" title="{$package->getName()}" class="packageStandaloneIcon" />
                                
-                               <section>
+                               <div>
                                        <dl>
                                                <dt>package</dt>
                                                <dd>{$package->package}</dd>
@@ -66,13 +66,13 @@
                                                <dt>creator</dt>
                                                <dd>{if $package->authorURL}<a href="dereferrer.php?url={$package->authorURL|rawurlencode}">{/if}{$package->author}{if $package->authorURL}</a>{/if}</dd>
                                        </dl>
-                               </section>
+                               </div>
                                
                                <footer>
                                        <nav>
                                                <ul class="smallButtons">
-                                                       <li><a href="{link controller='PackageView' id=$packageID}{/link}"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" class="bal loonTooltip" /> Details</a></li>
-                                                       <li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" class="bal loonTooltip" /> Update</a></li>
+                                                       <li><a href="{link controller='PackageView' id=$packageID}{/link}"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Details</span></a></li>
+                                                       <li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Update</span></a></li>
                                                </ul>
                                        </nav>
                                </footer>
@@ -83,18 +83,24 @@
        {hascontent}
                <div id="plugins" class="border tabMenuContent hidden">
                        <hgroup class="subHeading">
-                               <h1>installed plugins</h1>
+                               <h1>Installed Plugins</h1>
                        </hgroup>
                        
-                       <div class="pluginList"></div>
+                       <div class="contentHeader">
+                               <div class="pluginList"></div>
+                       </div>
                        
-                       <ol>
-                               {content}
-                                       {include file='packageListPlugins'}
-                               {/content}
-                       </ol>
+                       <section class="packageListPlugin">
+                               <ol>
+                                       {content}
+                                               {include file='packageListPlugins'}
+                                       {/content}
+                               </ol>
+                       </section>
                        
-                       <div class="pluginList"></div>
+                       <div class="contentFooter">
+                               <div class="pluginList"></div>
+                       </div>
                </div>
        {/hascontent}
 </div>

diff --git a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
index 986926054ada3ecd404f12c0fa4ceaf161bc6d95..74e15942a2c839a25fbb42e373f7b9d81494675a 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
@@ -1,12 +1,20 @@
 {foreach from=$plugins key=packageID item=package}
-       <li class="package" style="border: 1px solid rgb(192, 192, 192); display: inline-block; text-align: center; width: 150px;">
-               <a href="index.php/PackageView/{@$packageID}{@SID_ARG_1ST}">
-                       <span style="border-bottom: 1px solid rgb(192, 192, 192); display: block;">{$package->getName()}</span>
-                       <img src="http://s-ak.buzzfed.com/static/enhanced/web05/2011/3/18/1/enhanced-buzz-15854-1300424464-1.jpg" alt="" style="width: 100px;" />
-               </a>
-               <ul style="text-align: right;">
-                       <li style="display: inline-block;"><a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" class="balloonTooltip" /></a></li>
-                       <li style="display: inline-block;"><img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="uninstallButton balloonTooltip" data-objectID="{@$package->packageID}" /></li>
-               </ul>
+       <li class="infoPackagePlugin">
+               <div>
+                       <a href="index.php/PackageView/{@$packageID}{@SID_ARG_1ST}" title="{$package->getName()}" style="background-image: url('{@RELATIVE_WCF_DIR}icon/packagePlugin1.svg');">
+                               <h1>{$package->getName()}</h1>
+                               <small>Short descriptive text goes here</small>
+                       </a>
+               </div>
+               
+               <footer>
+                       <nav>
+                               <ul class="smallButtonBar">
+                                       <li><a href="index.php/PackageView/{@$packageID}{@SID_ARG_1ST}" title="{$package->getName()}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" /> <span>Update</span></a></li>
+                                       <li><a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$packageID}{@SID_ARG_2ND}" title="{lang}wcf.acp.package.view.button.update{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" /> <span>Update</span></a></li>
+                                       <li title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="balloonTooltip separator"><img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" class="uninstallButton" data-objectID="{@$package->packageID}" /> <span>Delete</span></li>
+                               </ul>
+                       </nav>
+               </footer>
        </li>
-{/foreach}
+{/foreach}
\ No newline at end of file

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index b020d4f91902315c6bfdad7b00627629dabb8371..cfc3b992689cd5cdf8e3c83b93d74fa3074bb11c 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -2880,7 +2880,7 @@ $.widget('ui.wcfPages', {
                                        var $leftChildrenImage = $('<img src="' + this.options.arrowDownIcon + '" alt="" />');
                                        $leftChildrenLink.append($leftChildrenImage);
                                        
-                                       var $leftChildrenInput = $('<input type="text" class="inputText" name="pageNo" />');
+                                       var $leftChildrenInput = $('<input type="text" name="pageNo" class="short" />');
                                        $leftChildren.append($leftChildrenInput);
                                        $leftChildrenInput.keydown($.proxy(this._handleInput, this));
                                        $leftChildrenInput.keyup($.proxy(this._handleInput, this));
@@ -2923,7 +2923,7 @@ $.widget('ui.wcfPages', {
                                        var $rightChildrenImage = $('<img src="' + this.options.arrowDownIcon + '" alt="" />');
                                        $rightChildrenLink.append($rightChildrenImage);
                                        
-                                       var $rightChildrenInput = $('<input type="text" class="inputText" name="pageNo" />');
+                                       var $rightChildrenInput = $('<input type="text" name="pageNo" class="short" />');
                                        $rightChildren.append($rightChildrenInput);
                                        $rightChildrenInput.keydown($.proxy(this._handleInput, this));
                                        $rightChildrenInput.keyup($.proxy(this._handleInput, this));

diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index c07560be134b4b7a338d0ba84145a9ff0994426a..0f0358b16c79a73aa55a91c77533af3fdc874cb2 100644 (file)
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -175,7 +175,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
                                        $html .= $this->makeLink($tagArgs['link'], $tagArgs['pages'] - 1, $tagArgs['page']);
                                }
                                else {
-                                       $html .= '<li class="children"><a onclick="multiPagesLinks.startPageNumberInput(this)">&hellip;<img src="'.self::getIconPath('arrowDown.png').'" alt="" /></a><input type="text" name="page" class="short" /><div><ul>'."\n";
+                                       $html .= '<li class="children"><a onclick="multiPagesLinks.startPageNumberInput(this)">&hellip;<img src="'.self::getIconPath('dropown1.svg').'" alt="" /></a><input type="text" name="page" class="short" /><div><ul>'."\n";
                                        
                                        $k = 0;
                                        $step = intval(ceil(($tagArgs['pages'] - $right) / self::SHOW_SUB_LINKS));

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index a45706968b5f7e2c8b52eeecbdf0c31817849dcc..935b019b4ad3af68febf0f069d469c719708ca86 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -521,8 +521,8 @@
                <item name="wcf.global.sortOrder.descending"><![CDATA[in absteigender Reihenfolge]]></item>
                <item name="wcf.global.button.back"><![CDATA[&laquo; Zurück]]></item>
                <item name="wcf.global.button.collapsible"><![CDATA[Auf- und Zuklappen]]></item>
-               <item name="wcf.global.page.next"><![CDATA[nächste Seite]]></item>
-               <item name="wcf.global.page.previous"><![CDATA[vorherige Seite]]></item>
+               <item name="wcf.global.page.next"><![CDATA[Nächste Seite]]></item>
+               <item name="wcf.global.page.previous"><![CDATA[Vorherige Seite]]></item>
                <item name="wcf.global.locale.unix"><![CDATA[de_DE]]></item> <!-- system variable; do not translate -->
                <item name="wcf.global.locale.win"><![CDATA[deu_deu]]></item> <!-- system variable; do not translate -->
        </category>