Replaced import and search buttons with icons (#4)

shiv12095 · Jul 25, 2016 · 488c15e · 488c15e
1 parent cd7dc2b
commit 488c15e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/server/devtool/pom.xml b/server/devtool/pom.xml
@@ -85,6 +85,11 @@
 			<artifactId>repo-http-models</artifactId>
 			<version>${project.version}</version>
 		</dependency>
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>font-awesome</artifactId>
+			<version>4.2.0</version>
+		</dependency>
 		<dependency>
 			<groupId>org.eclipse.vorto</groupId>
 			<artifactId>org.eclipse.vorto.editor.infomodel</artifactId>

diff --git a/server/devtool/src/main/resources/static/css/style.css b/server/devtool/src/main/resources/static/css/style.css
@@ -363,7 +363,7 @@ ul.nav {
 }
 
 .queryFilter {
-    width: 327px;
+    width: 240px;
 }
 
 .main .login-box .page-header .signup-box{
@@ -802,9 +802,34 @@ th.action
 	width: auto;
 }
 
+#import-button-container {
+	position:relative;
+	padding: 4px;
+	height: 440px;
+	width: auto;
+}
+
 /* Editor End */
 
 .st-selected{
 	background-color: #337ab7;
 }
 
+.import-button {
+	font-size: 50px;
+	background: none;
+	border: none;
+	position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+}
+
+.search-button {
+	padding: 2px;
+	font-size: 20px;
+	background: none;
+	border: none;
+}
diff --git a/server/devtool/src/main/resources/static/dist/js/controllers.js b/server/devtool/src/main/resources/static/dist/js/controllers.js
@@ -94,18 +94,12 @@ app.controller('InfomodelEditorController', function($rootScope, $scope, $http,
   	$scope.displayedPages 	= ($scope.models.length / 2);
 
   	$scope.getters= {
-        namespace: function (value) {
-	        return value.id.namespace.sort();
-        },
         name: function (value) {
 	        return value.id.name.sort();
-        },
-        version: function (value) {
-	        return value.id.version.sort();
         }
   	 }
 
-  	$scope.predicates = ['Name', 'Namespace', 'Version'];
+  	$scope.predicates = ['Name'];
 
 });
 

diff --git a/server/devtool/src/main/resources/static/index.html b/server/devtool/src/main/resources/static/index.html
@@ -10,6 +10,7 @@
     <title>Vorto Web Editor</title>
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
+	<link href="/webjars/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
 
 	<link rel="stylesheet" type="text/css" href="css/dashboard.css"/>
 	<link rel="stylesheet" type="text/css" href="css/ace-custom.css"/>

diff --git a/server/devtool/src/main/resources/static/templates/editor-template.html b/server/devtool/src/main/resources/static/templates/editor-template.html
@@ -13,15 +13,23 @@ <h3 class="box-title">Describe your Information Model</h3>
 	</div>
 </div>
 <div class="row">
-	<div class="col-md-6">
+	<div class="col-md-8">
 		<div id="editor-container">
 			<div id="xtext-editor" data-editor-xtext-lang="infomodel"
 				data-editor-enable-formatting-action="true"
 				data-editor-show-error-dialogs="true"></div>
 		</div>
 	</div>
+
+	<div class="col-md-1">
+		<div id="import-button-container">
+			<button class="import-button" ng-click="importFunctionBlock()" ng-disabed="showAddFunctionBlockButton">
+					<i class="fa fa-long-arrow-left"></i>
+			</button>
+		</div>
+	</div>
 
-	<div class="col-md-6">
+	<div class="col-md-3">
 		<div id="function-block-browser-container">
 			<div id="searchResult">
 				<div>
@@ -34,11 +42,8 @@ <h3 class="box-title">Describe your Information Model</h3>
 										<input type="search" placeholder="Search Function Blocks"
 											ng-model="queryFilter" ng-keypress="searchOnEnter($event)"
 											st-search autofocus class="queryFilter input-sm" />
-										<button id="search" type="button" class="btn btn-primary" ng-click="search()">
-											Search
-										</button>
-										<button type="button" class="btn btn-primary" ng-click="importFunctionBlock()" ng-disabed="showAddFunctionBlockButton">
-											Import Function block
+										<button id="search" class="search-button" ng-click="search()">
+											<i class="fa fa-search"></i>
 										</button>
 									</div>
 								</th>
@@ -49,19 +54,13 @@ <h3 class="box-title">Describe your Information Model</h3>
 							<tr>
 								<th id="onName" st-sort="id.name"><a href="">Name <i
 										class="fa fa-sort"></i></a></th>
-								<th id="onNamespace" st-sort="id.namespace"><a href="">Namespace
-										<i class="fa fa-sort"></i>
-								</a></th>
-								<th id="onVersion" st-sort="id.version"><a href="">Version
-										<i class="fa fa-sort"></i>
-								</a></th>
+								 <th class="action">Details</th>								
 							</tr>
 						</thead>
 						<tbody>
 							<tr st-select-row="model" ng-repeat="model in displayedModels">
 								<td>{{ model.id.name }}</td>
-								<td>{{ model.id.namespace }}</td>
-								<td>{{ model.id.version }}</td>
+								<td class="action"><a class="action"><i class="fa fa-info-circle"></i></a></td>
 							</tr>
 						</tbody>
 						<tfoot>