From 83982a985fcf5d47a2f2eb4686426cc2b19a330f Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Sat, 6 Feb 2016 01:32:27 +0100
Subject: [PATCH] ui updates, template generation
added hide link to info section
added initial letter to article text
added template precompilation for angular
---
vipra-ui/app/html/articles/show.html | 78 +++++++++++++++-------------
vipra-ui/app/html/modal.html | 15 ++++++
vipra-ui/app/index.html | 3 +-
vipra-ui/app/js/app.js | 4 +-
vipra-ui/app/js/controllers.js | 3 +-
vipra-ui/app/js/helpers.js | 4 ++
vipra-ui/app/less/app.less | 11 ++++
vipra-ui/bower.json | 3 +-
vipra-ui/gulpfile.js | 10 +++-
vipra-ui/package.json | 1 +
10 files changed, 90 insertions(+), 42 deletions(-)
create mode 100644 vipra-ui/app/html/modal.html
diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index f6b8e720..f69cd44e 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -1,49 +1,55 @@
<h1 ng-bind="::article.title"></h1>
-<table class="table table-bordered table-condensed">
- <tbody>
- <tr>
- <th>ID</th>
- <td ng-bind="::article.id"></td>
- </tr>
- <tr>
- <th>Date</th>
- <td ng-bind="::article.date"></td>
- </tr>
- <tr>
- <th>URL</th>
- <td><a ng-href="{{::article.url}}" ng-bind="::article.url"></a></td>
- </tr>
- <tr>
- <th>Created</th>
- <td ng-bind="::article.created"></td>
- </tr>
- <tr>
- <th>Last modified</th>
- <td ng-bind="::article.modified"></td>
- </tr>
- <tr>
- <th>Word count</th>
- <td ng-bind="::article.stats.wordCount"></td>
- </tr>
- <tr>
- <th>Links</th>
- <td>
- <a ui-sref="network({type:'articles', id:article.id})">Network graph</a>
- </td>
- </tr>
- </tbody>
-</table>
+<h3>Info <hide-link target="#info"/></h3>
+
+<div class="row" id="info">
+ <div class="col-md-12">
+ <table class="table table-bordered table-condensed">
+ <tbody>
+ <tr>
+ <th>ID</th>
+ <td ng-bind="::article.id"></td>
+ </tr>
+ <tr>
+ <th>Date</th>
+ <td ng-bind="::article.date"></td>
+ </tr>
+ <tr>
+ <th>URL</th>
+ <td><a ng-href="{{::article.url}}" ng-bind="::article.url"></a></td>
+ </tr>
+ <tr>
+ <th>Created</th>
+ <td ng-bind="::article.created"></td>
+ </tr>
+ <tr>
+ <th>Last modified</th>
+ <td ng-bind="::article.modified"></td>
+ </tr>
+ <tr>
+ <th>Word count</th>
+ <td ng-bind="::article.stats.wordCount"></td>
+ </tr>
+ <tr>
+ <th>Links</th>
+ <td>
+ <a ui-sref="network({type:'articles', id:article.id})">Network graph</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
<h3>Topics <hide-link target="#topics"/></h3>
<div class="row" id="topics">
- <div class="col-md-4 topic-links">
+ <div class="col-md-4 topic-links text-right">
<topic-link topic="topic.topic" ng-repeat="topic in article.topics">
<span ng-bind-template="({{topic.share}}%)"></span>
</topic-link>
</div>
- <div class="col-md-8">
+ <div class="col-md-offset-1 col-md-6">
<div class="pie-chart" id="topic-share" highcharts="topicShare"></div>
</div>
</div>
diff --git a/vipra-ui/app/html/modal.html b/vipra-ui/app/html/modal.html
new file mode 100644
index 00000000..12a50c29
--- /dev/null
+++ b/vipra-ui/app/html/modal.html
@@ -0,0 +1,15 @@
+<div class="modal-header">
+ <h3 class="modal-title">I'm a modal!</h3>
+</div>
+<div class="modal-body">
+ <ul>
+ <li ng-repeat="item in items">
+ <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
+ </li>
+ </ul>
+ Selected: <b>{{ selected.item }}</b>
+</div>
+<div class="modal-footer">
+ <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
+ <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
+</div>
\ No newline at end of file
diff --git a/vipra-ui/app/index.html b/vipra-ui/app/index.html
index c551576c..7b7f8498 100644
--- a/vipra-ui/app/index.html
+++ b/vipra-ui/app/index.html
@@ -21,10 +21,8 @@
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
- <link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
- <meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- stylesheets -->
@@ -34,6 +32,7 @@
<!-- javascript -->
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
+ <script src="js/templates.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
diff --git a/vipra-ui/app/js/app.js b/vipra-ui/app/js/app.js
index 1de6e116..7bd748f8 100644
--- a/vipra-ui/app/js/app.js
+++ b/vipra-ui/app/js/app.js
@@ -8,11 +8,13 @@
'ngResource',
'ngSanitize',
'ui.router',
+ 'ui.bootstrap',
'vipra.controllers',
'vipra.directives',
'vipra.factories',
'vipra.filters',
- 'vipra.services'
+ 'vipra.services',
+ 'vipra.templates'
]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index 84012767..120db447 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -95,6 +95,7 @@
ArticleFactory.get({id: $stateParams.id}, function(response) {
$scope.article = response.data;
+ $scope.article.text = createInitial($scope.article.text);
$scope.article.date = formatDate($scope.article.date);
$scope.article.created = formatDateTime($scope.article.created);
$scope.article.modified = formatDateTime($scope.article.modified);
@@ -117,7 +118,7 @@
plotOptions: {
pie: { allowPointSelect: true }
},
- title: { text: 'Topic share' },
+ title: { text: '' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
series: [{
name: 'Topic Share',
diff --git a/vipra-ui/app/js/helpers.js b/vipra-ui/app/js/helpers.js
index 0b390950..726e96c9 100644
--- a/vipra-ui/app/js/helpers.js
+++ b/vipra-ui/app/js/helpers.js
@@ -19,6 +19,10 @@
return Math.round(input * 100);
};
+ window.createInitial = function(text) {
+ return '<span class="initial">' + text.substring(0, 1) + "</span>" + text.substring(1);
+ };
+
String.prototype.ellipsize = function(max) {
max = max || 20;
if(this.length > max) {
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 5b4e052f..0919aec6 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -9,6 +9,10 @@ body {
margin-bottom: 60px;
}
+a:hover {
+ cursor:pointer;
+}
+
.heading {
.noselect;
background: transparent url(/img/logo.svg) no-repeat 50% 50%;
@@ -117,6 +121,13 @@ body {
border-radius: 3px;
}
+.initial {
+ float: left;
+ font-size: 70px;
+ line-height: 60px;
+ padding-right: 3px;
+}
+
.topic-links .topic-link {
display: block;
}
diff --git a/vipra-ui/bower.json b/vipra-ui/bower.json
index ade95723..8cd59437 100644
--- a/vipra-ui/bower.json
+++ b/vipra-ui/bower.json
@@ -23,6 +23,7 @@
"angular-resource": "^1.5.0",
"angular-ui-router": "^0.2.17",
"angular-sanitize": "^1.5.0",
- "highcharts": "^4.2.2"
+ "highcharts": "^4.2.2",
+ "angular-bootstrap": "^1.1.2"
}
}
diff --git a/vipra-ui/gulpfile.js b/vipra-ui/gulpfile.js
index 87ee3e25..89250fac 100644
--- a/vipra-ui/gulpfile.js
+++ b/vipra-ui/gulpfile.js
@@ -4,7 +4,8 @@ var gulp = require('gulp'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
cssnano = require('gulp-cssnano'),
- webserver = require('gulp-webserver');
+ webserver = require('gulp-webserver'),
+ templatecache = require('gulp-angular-templatecache');
var assets = {
js: [
@@ -13,6 +14,7 @@ var assets = {
'bower_components/angular-resource/angular-resource.min.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/angular-ui-router/release/angular-ui-router.min.js',
+ 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js',
'bower_components/highcharts/highcharts.js',
'bower_components/vis/dist/vis.min.js'
@@ -46,6 +48,12 @@ gulp.task('html', function() {
.pipe(gulp.dest('public'));
gulp.src(['app/html/**/*.html'])
.pipe(gulp.dest('public/html'));
+ gulp.src(['app/html/**/*.html'])
+ .pipe(templatecache({
+ module: 'vipra.templates',
+ standalone: true
+ }))
+ .pipe(gulp.dest('public/js'));
});
gulp.task('img', function() {
diff --git a/vipra-ui/package.json b/vipra-ui/package.json
index 5be5d8d2..85743ec7 100644
--- a/vipra-ui/package.json
+++ b/vipra-ui/package.json
@@ -6,6 +6,7 @@
"private": true,
"devDependencies": {
"gulp": "^3.9.0",
+ "gulp-angular-templatecache": "^1.8.0",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.0",
"gulp-include": "^2.1.0",
--
GitLab