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
'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'}
});
new WCF.Effect.SmoothScroll();
new WCF.Effect.BalloonTooltip();
new WCF.Sitemap();
+ new WCF.Style.Chooser();
WCF.Dropdown.init();
{event name='javascriptInit'}
--- /dev/null
+<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
}
});
+/**
+ * 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.
*/
* @category Community Framework
*/
class StyleAction extends AbstractDatabaseObjectAction {
+ /**
+ * @see wcf\data\AbstractDatabaseObjectAction::$allowGuestAccess
+ */
+ protected $allowGuestAccess = array('changeStyle', 'getStyleChooser');
+
/**
* @see wcf\data\AbstractDatabaseObjectAction::$className
*/
*/
protected $permissionsUpdate = array('admin.style.canEditStyle');
+ /**
+ * style object
+ * @var wcf\data\style\Style
+ */
+ public $style = null;
+
/**
* style editor object
* @var wcf\data\style\StyleEditor
$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')
+ );
+ }
}
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());
}
/**
*/
protected $sessionEditorClassName = '';
+ /**
+ * style id
+ * @var integer
+ */
+ protected $styleID = null;
+
/**
* enable cookie support
* @var boolean
$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();
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
$this->groupData = null;
$this->languageIDs = null;
$this->languageID = $this->user->languageID;
+ $this->styleID = $this->user->styleID;
// truncate session variables
}
*/
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);
}
/**
margin-top: @wcfGapMedium;
}
+.pointer {
+ cursor: pointer;
+}
+
/* icons */
.icon(@imageSize) {
.square(@imageSize);
> * > 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 */
<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>