Add 'About Swagger Editor' menu option and modal and some UI modifica…

…tion Fixed swagger-api#271
LianwMS · Dec 15, 2014 · ab43d5c · ab43d5c
1 parent 2fc3d77
commit ab43d5c
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 3 deletions.
diff --git a/app/index.html b/app/index.html
@@ -68,6 +68,7 @@
     <script src="scripts/controllers/importurl.js"></script>
     <script src="scripts/controllers/errorpresenter.js"></script>
     <script src="scripts/controllers/openexamples.js"></script>
+    <script src="scripts/controllers/modal.js"></script>
     <script src="scripts/controllers/security.js"></script>
     <script src="scripts/directives/on-file-change.js"></script>
     <script src="scripts/directives/path.js"></script>

diff --git a/app/scripts/controllers/header.js b/app/scripts/controllers/header.js
@@ -101,6 +101,14 @@ PhonicsApp.controller('HeaderCtrl', function HeaderCtrl($scope, $modal,
     });
   };
 
+  $scope.openAbout = function () {
+    $modal.open({
+      templateUrl: 'templates/about.html',
+      size: 'large',
+      controller: 'ModalCtrl'
+    });
+  };
+
   $scope.toggleAboutEditor = function (value) {
     $scope.showAbout = value;
   };

diff --git a/app/scripts/controllers/modal.js b/app/scripts/controllers/modal.js
@@ -0,0 +1,9 @@
+'use strict';
+
+/*
+ * General modal controller
+*/
+PhonicsApp.controller('ModalCtrl', function ModalCtrl($scope, $modalInstance) {
+  $scope.cancel = $modalInstance.close;
+  $scope.close = $modalInstance.close;
+});
diff --git a/app/styles/components/header.less b/app/styles/components/header.less
@@ -8,7 +8,7 @@
   z-index: 5;
 }
 
-span.logo {
+a.logo {
   background-image: url("../images/swagger-sprite.png");
   background-repeat: no-repeat;
   background-position: 0 -25px;

diff --git a/app/styles/components/modal.less b/app/styles/components/modal.less
@@ -40,6 +40,10 @@
     select {
       color: #000000; // 1
     }
+
+    a {
+      color: rgb(15, 214, 250);
+    }
   }
 
   .modal-footer {
@@ -56,4 +60,8 @@
       }
     }
   }
+
+  .monospace {
+    font-family: monospace;
+  }
 }
diff --git a/app/templates/about.html b/app/templates/about.html
@@ -0,0 +1,25 @@
+<div class="modal-header">
+  <h3 class="modal-title">About Swagger Editor</h3>
+</div>
+<div class="modal-body">
+  <p>Swagger Editor</p>
+  <p>Version 2.7.0</p>
+  <p><a href="https://github.com/swagger-api/swagger-editor" target="_blank">Github Project Page</a></p>
+  <div class="monospace">
+    <p>Copyright 2014 Reverb Technologies, Inc.</p>
+    <p>
+      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 <a href="http://www.apache.org/licenses/LICENSE-2.0">apache.org/licenses/LICENSE-2.0</a></p>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+<div class="modal-footer">
+  <button class="btn btn-primary" ng-click="close()">Close</button>
+</div>
diff --git a/app/views/header/header.html b/app/views/header/header.html
@@ -1,6 +1,6 @@
 <div class="main-header">
   <div ng-if="showAbout" ng-include="'templates/intro.html'"></div>
-  <span class="logo" ng-if="!showHeaderBranding()"></span>
+  <a href="http://swagger.io" target="_blank" class="logo" ng-if="!showHeaderBranding()"></a>
   <div ng-include="'templates/branding-left.html'" ng-if="showHeaderBranding()" class="branding-3rdparty"></div>
   <section class="menu-bar">
     <div class="file dropdown" ng-if="showFileMenu()">
@@ -115,7 +115,10 @@
           <a href="https://github.com/swagger-api/swagger-editor/issues/new?labels=From%20Editor" target="_blank">Report A Bug</a>
         </li>
         <li role="presentation">
-          <a role="menuitem" tabindex="-1" href="http://swagger.wordnik.com/"target="_blank">Swagger Website</a>
+          <a role="menuitem" tabindex="-1" href="http://swagger.io/"target="_blank">Swagger Website</a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" ng-click="openAbout()">About Swagger Editor</a>
         </li>
         <li role="presentation" class="divider"></li>
         <li role="presentation">