Added style chooser and added .doubleColumned
authorAlexander Ebert <ebert@woltlab.com>
Fri, 2 Nov 2012 22:09:32 +0000 (23:09 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 2 Nov 2012 22:09:32 +0000 (23:09 +0100)
Every .containerList can now be toggled into a two-column list by simply adding .doubleColumned without any further markup changes required. Replaces .userList and .simpleUserList

com.woltlab.wcf/template/headInclude.tpl
com.woltlab.wcf/template/styleChooser.tpl [new file with mode: 0644]
wcfsetup/install/files/js/WCF.js
wcfsetup/install/files/lib/data/style/StyleAction.class.php
wcfsetup/install/files/lib/system/WCF.class.php
wcfsetup/install/files/lib/system/session/SessionHandler.class.php
wcfsetup/install/files/style/global.less
wcfsetup/install/files/style/layout.less
wcfsetup/install/lang/de.xml

index 7a88cdbe0d89b390bc4541fcb81eba7243e7ac66..54b9d2cea78360357f78d15939767349188c1725 100644 (file)
@@ -66,7 +66,8 @@
                        'wcf.global.confirmation.cancel': '{lang}wcf.global.confirmation.cancel{/lang}',
                        'wcf.global.confirmation.confirm': '{lang}wcf.global.confirmation.confirm{/lang}',
                        'wcf.global.confirmation.title': '{lang}wcf.global.confirmation.title{/lang}',
-                       'wcf.sitemap.title': '{lang}wcf.sitemap.title{/lang}'
+                       'wcf.sitemap.title': '{lang}wcf.sitemap.title{/lang}',
+                       'wcf.style.changeStyle': '{lang}wcf.style.changeStyle{/lang}'
                        {event name='javascriptLanguageImport'}
                });
                
@@ -94,6 +95,7 @@
                new WCF.Effect.SmoothScroll();
                new WCF.Effect.BalloonTooltip();
                new WCF.Sitemap();
+               new WCF.Style.Chooser();
                WCF.Dropdown.init();
                
                {event name='javascriptInit'}
diff --git a/com.woltlab.wcf/template/styleChooser.tpl b/com.woltlab.wcf/template/styleChooser.tpl
new file mode 100644 (file)
index 0000000..7cc02c2
--- /dev/null
@@ -0,0 +1,19 @@
+<div class="container">
+       <ol class="containerList styleList{if $styleList|count > 4} doubleColumned{/if}">
+               {foreach from=$styleList item=style}
+                       <li data-style-id="{@$style->styleID}">
+                               <div class="box64">
+                                       <span class="framed">
+                                               <img src="{@$style->getPreviewImage()}" alt="" />
+                                       </span>
+                                       <div class="details">
+                                               <hgroup class="containerHeadline">
+                                                       <h1>{$style->styleName}</h1>
+                                               </hgroup>
+                                               {if $style->styleDescription}<small>{$style->styleDescription}</small>{/if}
+                                       </div>
+                               </div>
+                       </li>
+               {/foreach}
+       </ol>
+</div>
\ No newline at end of file
index 6595819ec46d501ffd9263a5bcafbacc2541aca9..3700a0decb09f20b0660b1a18cef43d8447d60ed 100755 (executable)
@@ -6724,6 +6724,98 @@ WCF.Language.Chooser = Class.extend({
        }
 });
 
+/**
+ * Namespace for style related classes.
+ */
+WCF.Style = { };
+
+/**
+ * Provides a visual style chooser.
+ */
+WCF.Style.Chooser = Class.extend({
+       /**
+        * dialog overlay
+        * @var jQuery
+        */
+       _dialog: null,
+       
+       /**
+        * action proxy
+        * @var WCF.Action.Proxy
+        */
+       _proxy: null,
+       
+       /**
+        * Initializes the style chooser class.
+        */
+       init: function() {
+               $('<li class="styleChooser"><a>' + WCF.Language.get('wcf.style.changeStyle') + '</a></li>').appendTo($('#footerNavigation > ul')).click($.proxy(this._showDialog, this));
+               
+               this._proxy = new WCF.Action.Proxy({
+                       success: $.proxy(this._success, this)
+               });
+       },
+       
+       /**
+        * Displays the style chooser dialog.
+        */
+       _showDialog: function() {
+               if (this._dialog === null) {
+                       this._dialog = $('<div id="styleChooser" />').hide().appendTo(document.body);
+                       this._loadDialog();
+               }
+               else {
+                       this._dialog.wcfDialog({
+                               title: WCF.Language.get('wcf.style.changeStyle')
+                       });
+               }
+       },
+       
+       /**
+        * Loads the style chooser dialog.
+        */
+       _loadDialog: function() {
+               this._proxy.setOption('data', {
+                       actionName: 'getStyleChooser',
+                       className: 'wcf\\data\\style\\StyleAction'
+               });
+               this._proxy.sendRequest();
+       },
+       
+       /**
+        * Handles successful AJAX requests.
+        * 
+        * @param       object          data
+        * @param       string          textStatus
+        * @param       jQuery          jqXHR
+        */
+       _success: function(data, textStatus, jqXHR) {
+               if (data.returnValues.actionName === 'changeStyle') {
+                       window.location.reload();
+                       return;
+               }
+               
+               this._dialog.html(data.returnValues.template);
+               this._dialog.find('li').addClass('pointer').click($.proxy(this._click, this));
+               
+               this._showDialog();
+       },
+       
+       /**
+        * Changes user style.
+        * 
+        * @param       object          event
+        */
+       _click: function(event) {
+               this._proxy.setOption('data', {
+                       actionName: 'changeStyle',
+                       className: 'wcf\\data\\style\\StyleAction',
+                       objectIDs: [ $(event.currentTarget).data('styleID') ]
+               });
+               this._proxy.sendRequest();
+       }
+});
+
 /**
  * WCF implementation for nested sortables.
  */
index 0a09ed2958579d79773610589bce649f5212efdd..c93ce22ce1f418ad02ff6d0bb29723e199b82782 100644 (file)
@@ -25,6 +25,11 @@ use wcf\util\StringUtil;
  * @category   Community Framework
  */
 class StyleAction extends AbstractDatabaseObjectAction {
+       /**
+        * @see wcf\data\AbstractDatabaseObjectAction::$allowGuestAccess
+        */
+       protected $allowGuestAccess = array('changeStyle', 'getStyleChooser');
+       
        /**
         * @see wcf\data\AbstractDatabaseObjectAction::$className
         */
@@ -40,6 +45,12 @@ class StyleAction extends AbstractDatabaseObjectAction {
         */
        protected $permissionsUpdate = array('admin.style.canEditStyle');
        
+       /**
+        * style object
+        * @var wcf\data\style\Style
+        */
+       public $style = null;
+       
        /**
         * style editor object
         * @var wcf\data\style\StyleEditor
@@ -447,4 +458,62 @@ class StyleAction extends AbstractDatabaseObjectAction {
                        $style->update(array('disabled' => $disabled));
                }
        }
+       
+       /**
+        * Validates parameters to change user style.
+        * 
+        * @todo        take care of wcf1_style_to_package as it might apply further restrictions
+        */
+       public function validateChangeStyle() {
+               $this->style = $this->getSingleObject();
+               if ($this->style->disabled && !WCF::getSession()->getPermission('admin.style.canUseDisabledStyle')) {
+                       throw new PermissionDeniedException();
+               }
+       }
+       
+       /**
+        * Changes user style.
+        * 
+        * @return      array<string>
+        */
+       public function changeStyle() {
+               StyleHandler::getInstance()->changeStyle($this->style->styleID);
+               if (StyleHandler::getInstance()->getStyle()->styleID == $this->style->styleID) {
+                       WCF::getSession()->setStyleID($this->style->styleID);
+               }
+               
+               return array(
+                       'actionName' => 'changeStyle'
+               );
+       }
+       
+       /**
+        * Does nothing.
+        */
+       public function validateGetStyleChooser() { }
+       
+       /**
+        * Returns the style chooser dialog.
+        * 
+        * @todo        take care of wcf1_style_to_package as it might apply further restrictions
+        * 
+        * @return      array<string>
+        */
+       public function getStyleChooser() {
+               $styleList = new StyleList();
+               if (!WCF::getSession()->getPermission('admin.style.canUseDisabledStyle')) {
+                       $styleList->getConditionBuilder()->add("style.disabled = ?", array(0));
+               }
+               $styleList->sqlOrderBy = "style.styleName ASC";
+               $styleList->readObjects();
+               
+               WCF::getTPL()->assign(array(
+                       'styleList' => $styleList
+               ));
+               
+               return array(
+                       'actionName' => 'getStyleChooser',
+                       'template' => WCF::getTPL()->fetch('styleChooser')
+               );
+       }
 }
index 66fa36581fa16fa6a525f28187a1682c47772e4b..4f7b447a2ab06b5abfea48fa179fef9df618c67d 100644 (file)
@@ -361,6 +361,19 @@ class WCF {
                self::$tplObj = TemplateEngine::getInstance();
                self::getTPL()->setLanguageID(self::getLanguage()->languageID);
                $this->assignDefaultTemplateVariables();
+               
+               $this->initStyle();
+       }
+       
+       /**
+        * Initializes the user's style.
+        */
+       protected function initStyle() {
+               if (isset($_REQUEST['styleID'])) {
+                       WCF::getSession()->setStyleID(intval($_REQUEST['styleID']));
+               }
+               
+               StyleHandler::getInstance()->changeStyle(WCF::getSession()->getStyleID());
        }
        
        /**
index 43441324e82ca6bcb6b4c09f13a7ace31510b209..486386d1fb52b9e13badf6f8de5eb7c8f095da69 100644 (file)
@@ -70,6 +70,12 @@ class SessionHandler extends SingletonFactory {
         */
        protected $sessionEditorClassName = '';
        
+       /**
+        * style id
+        * @var integer
+        */
+       protected $styleID = null;
+       
        /**
         * enable cookie support
         * @var boolean
@@ -138,8 +144,9 @@ class SessionHandler extends SingletonFactory {
                $this->initSecurityToken();
                $this->defineConstants();
                
-               // assign language id
-               $this->languageID = $this->user->languageID;
+               // assign language and style id
+               $this->languageID = ($this->getVar('languageID') === null) ? $this->user->languageID : $this->getVar('languageID');
+               $this->styleID = ($this->getVar('styleID') === null) ? $this->user->styleID : $this->getVar('styleID');
                
                // init environment variables
                $this->initEnvironment();
@@ -472,6 +479,10 @@ class SessionHandler extends SingletonFactory {
                                                AND userID = ?";
                        $statement = WCF::getDB()->prepareStatement($sql);
                        $statement->execute(array($this->sessionID, $this->userID));
+                       
+                       // reset session variables
+                       $this->variables = array();
+                       $this->variablesChanged = true;
                }
                
                // update user reference
@@ -489,6 +500,7 @@ class SessionHandler extends SingletonFactory {
                $this->groupData = null;
                $this->languageIDs = null;
                $this->languageID = $this->user->languageID;
+               $this->styleID = $this->user->styleID;
                
                // truncate session variables
        }
@@ -557,6 +569,26 @@ class SessionHandler extends SingletonFactory {
         */
        public function setLanguageID($languageID) {
                $this->languageID = $languageID;
+               $this->register('languageID', $this->languageID);
+       }
+       
+       /**
+        * Returns currently active style id.
+        * 
+        * @return      integer
+        */
+       public function getStyleID() {
+               return $this->styleID;
+       }
+       
+       /**
+        * Sets the currently active style id.
+        * 
+        * @param       integer         $styleID
+        */
+       public function setStyleID($styleID) {
+               $this->styleID = $styleID;
+               $this->register('styleID', $this->styleID);
        }
        
        /**
index e9f92f859be5911f8c19c842a4f51ea89992a22a..d5d3c1139c03b598cda052419e1933a649fa5b74 100644 (file)
@@ -57,6 +57,10 @@ a {
        margin-top: @wcfGapMedium;
 }
 
+.pointer {
+       cursor: pointer;
+}
+
 /* icons */
 .icon(@imageSize) {
        .square(@imageSize);
index 26e93959c76b5d0746d0bf5c559ea3ee5f3d4a33..4a39799e2d2be84f74a98cc2449ba287318be4ab 100644 (file)
        > * > li {
                padding: @wcfGapMedium @wcfGapLarge;
        }
+       
+       &.doubleColumned {
+               overflow: hidden;
+               
+               > li {
+                       padding: 0;
+                       float: left;
+                       width: 50%;
+                       height: 90px;
+                       overflow: hidden;
+                       
+                       &:nth-child(even) {
+                               float: right;
+                       }
+                       
+                       &:nth-child(4n), &:nth-child(4n+1) {
+                               background-color: @wcfContainerBackgroundColor;
+                       }
+                       
+                       &:nth-child(4n+2), &:nth-child(4n+3) {
+                               background-color: @wcfContainerAccentBackgroundColor;
+                       }
+                       
+                       &:hover {
+                               background-color: @wcfContainerHoverBackgroundColor;
+                               
+                               > div > .buttonList {
+                                       opacity: 1;
+                               }
+                       }
+                       
+                       > div {
+                               padding: 14px 21px;
+                               position: relative;
+                               
+                               > .buttonList {
+                                       opacity: 0;
+                                       position: absolute;
+                                       right: 0;
+                                       top: 0;
+                                       
+                                       .transition(opacity, .1s);
+                               }
+                       }
+               }
+               
+               &:after {
+                       content: "";
+                       display: table;
+                       clear: left;
+               }
+       }
+       
+       &.styleList > li > div.box64 {
+               > span {
+                       text-align: center;
+                       width: 110px;
+               }
+               
+               > div {
+                       margin-left: 115px;
+               }
+       }
 }
 
 /* boxes with an image */
index da108bd2eba282d9e3ac80da60fa4e3b2ad871cd..3545af19e2f6bc3b4026612af4bb5138e5c05e1c 100644 (file)
                <item name="wcf.sitemap.title"><![CDATA[Schnellnavigation]]></item>
        </category>
        
+       <category name="wcf.style">
+               <item name="wcf.style.changeStyle"><![CDATA[Stil ändern]]></item>
+       </category>
+       
        <category name="wcf.user">
                <item name="wcf.user.confirmEmail"><![CDATA[E-Mail-Adresse wiederholen]]></item>
                <item name="wcf.user.confirmPassword"><![CDATA[Kennwort wiederholen]]></item>