feat: backtop support for dashboard

apolloconfig · Oct 19, 2021 · 0bd026b · 0bd026b
1 parent 09d2fa3
commit 0bd026b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 1 deletion.
diff --git a/apollo-portal/src/main/resources/static/config.html b/apollo-portal/src/main/resources/static/config.html
@@ -368,6 +368,8 @@ <h4 class="modal-title">{{'Config.CreateBranchTips.DialogTitle' | translate}}</h
 
     <div ng-include="'views/common/footer.html'"></div>
 
+    <!--load backTop component-->
+    <div ng-include="'views/component/back-top.html'"></div>
 
     <!-- jquery.js -->
     <script src="vendor/jquery.min.js" type="text/javascript"></script>
@@ -450,6 +452,7 @@ <h4 class="modal-title">{{'Config.CreateBranchTips.DialogTitle' | translate}}</h
     <!--controller-->
     <script type="application/javascript" src="scripts/controller/config/ConfigNamespaceController.js"></script>
     <script type="application/javascript" src="scripts/controller/config/ConfigBaseInfoController.js"></script>
+    <script type="application/javascript" src="scripts/controller/BackTopController.js"></script>
 
     <script type="application/javascript" src="scripts/PageCommon.js"></script>
 

diff --git a/apollo-portal/src/main/resources/static/scripts/controller/BackTopController.js b/apollo-portal/src/main/resources/static/scripts/controller/BackTopController.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021 Apollo Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+appService.controller("BackTopController",
+    ['$scope', BackTopController]);
+
+function BackTopController($scope) {
+    // scroll status
+    $scope.isScroll = false;
+
+    $scope.backToTop = function () {
+        window.scrollTo(0, 0)
+    }
+
+    window.addEventListener("scroll", function () {
+        if(!window.scrollY && $scope.isScroll) {
+            $scope.isScroll = false
+            document.body.click()
+        }
+
+        if(window.scrollY != 0 && !$scope.isScroll) {
+            $scope.isScroll = true
+            document.body.click()
+        }
+    })
+}
diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -15,7 +15,8 @@
  *
  */
 html, body {
-    height: 100%
+    height: 100%;
+    scroll-behavior: smooth;
 }
 
 body {
@@ -1086,3 +1087,30 @@ table th {
     line-height: 34px;
     font-size: 14px;
 }
+
+/*backTop component style*/
+.back-top {
+    position: fixed;
+    height: 40px;
+    width: 40px;
+    border-radius: 4px;
+    color: #ffffff;
+    z-index: 5;
+    cursor: pointer;
+    right: 40px;
+    bottom: 40px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+    background: #0c4c7f;
+    opacity: .2;
+    user-select: none;
+}
+
+.back-top:hover {
+    opacity: .4;
+}
+
+.back-top:active {
+    opacity: .6;
+}
diff --git a/apollo-portal/src/main/resources/static/views/component/back-top.html b/apollo-portal/src/main/resources/static/views/component/back-top.html
@@ -0,0 +1,19 @@
+<!--
+  ~ Copyright 2021 Apollo Authors
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+-->
+<div class="back-top" ng-controller="BackTopController" ng-show="isScroll" ng-click="backToTop()">
+  <span class="glyphicon glyphicon-triangle-top"></span>
+</div>