From 4d194569637d224cbaa8c91af5047890fa3892f3 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 13 Jul 2016 18:51:13 +0200
Subject: [PATCH] Improved buttons / page action buttons

---
 .../files/js/WoltLab/WCF/Ui/Page/Action.js    |  2 ++
 .../files/js/WoltLab/WCF/Ui/Page/JumpToTop.js |  2 +-
 .../files/style/layout/pageHeader.scss        |  1 +
 wcfsetup/install/files/style/ui/button.scss   | 12 ++++++++---
 .../install/files/style/ui/pageAction.scss    | 21 ++++---------------
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Action.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Action.js
index 0996f982b6..8314cd7d3b 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Action.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Action.js
@@ -41,6 +41,8 @@ define(['Dictionary', 'Dom/Util'], function(Dictionary, DomUtil) {
 			if (_didInit === false) this.setup();
 			
 			var listItem = elCreate('li');
+			button.classList.add('button');
+			button.classList.add('buttonPrimary');
 			listItem.appendChild(button);
 			elAttr(listItem, 'aria-hidden', (buttonName === 'toTop' ? 'true' : 'false'));
 			elData(listItem, 'name', buttonName);
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpToTop.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpToTop.js
index 77db0749a1..6ceaeb792b 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpToTop.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpToTop.js
@@ -30,7 +30,7 @@ define(['Environment', 'Language', './Action'], function(Environment, Language,
 			button.className = 'jsTooltip';
 			button.href = '#';
 			elAttr(button, 'title', Language.get('wcf.global.scrollUp'));
-			button.innerHTML = '<span class="icon icon16 fa-arrow-up"></span>';
+			button.innerHTML = '<span class="icon icon32 fa-angle-up"></span>';
 			
 			button.addEventListener(WCF_CLICK_EVENT, this._jump.bind(this));
 			
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index e8103de383..850f5a6c78 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -283,6 +283,7 @@
 			position: relative;
 			text-align: left;
 			text-overflow: ellipsis;
+			text-transform: initial;
 			white-space: nowrap;
 			
 			&::after {
diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 79a4929488..bf42cd19b3 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -11,7 +11,7 @@ a.button { // a.button is required to override link formatting, such as drop-dow
 	cursor: pointer;
 	display: inline-block;
 	outline: none;
-	padding: 6px 12px;
+	padding: 8px 18px;
 	text-decoration: none;
 	
 	// input elements do not inherit font family, size and line-height from body
@@ -36,10 +36,15 @@ a.button { // a.button is required to override link formatting, such as drop-dow
 	}
 	
 	&.small {
-		padding: 4px 7px;
+		padding: 6px 8px;
+		text-transform: initial;
 		
 		@include wcfFontSmall;
 	}
+	
+	&:not(.inputPrefix) {
+		text-transform: uppercase;
+	}
 }
 
 button.buttonPrimary,
@@ -98,7 +103,8 @@ a.button {
 	@include inlineList;
 	
 	&.smallButtons .button {
-		padding: 5px 7px;
+		padding: 6px 8px;
+		text-transform: initial;
 		
 		@include wcfFontSmall;
 	}
diff --git a/wcfsetup/install/files/style/ui/pageAction.scss b/wcfsetup/install/files/style/ui/pageAction.scss
index 0cfef42e41..4126af5825 100644
--- a/wcfsetup/install/files/style/ui/pageAction.scss
+++ b/wcfsetup/install/files/style/ui/pageAction.scss
@@ -15,9 +15,9 @@
 }
 
 .pageAction {
-	bottom: 20px;
+	bottom: 10px;
 	position: fixed;
-	right: 20px;
+	right: 10px;
 	z-index: 400;
 	
 	@include inlineList;
@@ -46,21 +46,8 @@
 			visibility: hidden;
 		}
 		
-		> a {
-			background-color: rgba(0, 0, 0, .7);
-			border-radius: 2px;
-			color: rgba(224, 224, 224, 1);
-			padding: 5px 10px;
-			
-			> .icon {
-				color: inherit;
-			}
-		}
-		
-		> a:hover,
-		&.dropdownOpen > a {
-			background-color: rgba(0, 0, 0, 1);
-			color: rgba(255, 255, 255, 1);
+		&.toTop > a {
+			padding: 2px;
 		}
 	}
 }
-- 
2.20.1