Fix dark mode arrows

Replaces custom arrows with core ones, allowing them to be themed. Use flex to properly align buttons Closes #1042 Signed-off-by: Thomas Citharel <[email protected]>
nextcloud · Apr 4, 2019 · 465e121 · 465e121
1 parent f6d5acf
commit 465e121
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 53 deletions.
diff --git a/css/app/datepicker.scss b/css/app/datepicker.scss
@@ -117,6 +117,7 @@
 #app-navigation .datepicker-heading,
 #app-navigation .togglebuttons {
 	display: flex;
+	justify-content: space-around;
 	margin: 0 5px;
 	width: calc(100% - 10px);
 }
@@ -140,45 +141,33 @@
 	z-index: 50; /* Force show border */
 }
 
-#app-navigation .datepicker-heading .button.first,
-#app-navigation .togglebuttons .button.first {
+#app-navigation .datepicker-heading .icon-view-previous,
+#app-navigation .togglebuttons .icon-view-previous {
 	margin-right: -1px;
 	border-radius: 3px 0 0 3px;
+	flex-grow: 1;
 }
 
 #app-navigation .datepicker-heading .button.middle,
 #app-navigation .togglebuttons .button.middle {
 	margin-left: 0;
 	margin-right: 0;
 	border-radius: 0;
+	flex-grow: 2;
 }
 
-#app-navigation .datepicker-heading .button.last,
-#app-navigation .togglebuttons .button.last {
+#app-navigation .datepicker-heading .icon-view-next,
+#app-navigation .togglebuttons .icon-view-next {
 	margin-left: -1px;
 	border-radius: 0 3px 3px 0;
+	flex-grow: 1;
 }
 
-#app-navigation .datepicker-heading .button.first,
-#app-navigation .datepicker-heading .button.last {
+#app-navigation .datepicker-heading .icon-view-previous,
+#app-navigation .datepicker-heading .icon-view-next {
 	width: 35px;
 }
 
 #app-navigation .datepicker-heading .button.middle {
 	width: calc(100% - 70px);
 }
-
-/* Overrides */
-
-.glyphicon-chevron-left {
-	background: url("../../img/leftarrow.svg") center center no-repeat;
-}
-
-.glyphicon-chevron-right {
-	background: url("../../img/rightarrow.svg") center center no-repeat;
-}
-
-.glyphicon {
-	display: block;
-	height: 15px;
-}
diff --git a/img/leftarrow.svg b/img/leftarrow.svg
diff --git a/img/rightarrow.svg b/img/rightarrow.svg
diff --git a/templates/part.datepicker.php b/templates/part.datepicker.php
@@ -23,15 +23,11 @@
  */
 ?>
 <div class="datepicker-heading">
-	<button type="button" class="button first" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>">
-		<i class="glyphicon glyphicon-chevron-left"></i>
-	</button>
+	<a href="#" class="icon-view-previous" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>"></a>
 	<button ng-cloak type="button" class="button middle" ng-click="toggle()">
 		{{ dt | datepickerFilter:selectedView }}
 	</button>
-	<button type="button" class="button last" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>">
-		<i class="glyphicon glyphicon-chevron-right"></i>
-	</button>
+	<a href="#" class="icon-view-next" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>"></a>
 </div>
 <div id="datepicker-ng-show-container" class="ng-hide" ng-show="visibility">
 	<div