Merge pull request #412 from jenbreese/cards-theme

#411: Added cards theme

app/themes/cards/ui/app/app.js

@@ -0,0 +1,24 @@
+(function () {
+  'use strict';
+
+  angular.module('app', [
+    'ml.common',
+    'ml.search',
+    'ml.search.tpls',
+    'ml.utils',
+    'ngJsonExplorer',
+    'app.create',
+    'app.detail',
+    'app.error',
+    'app.login',
+    'app.root',
+    'app.search',
+    'app.phone',
+    'app.user',
+    'ui.bootstrap',
+    'ui.router',
+    'ui.tinymce',
+    'ngToast'
+  ]);
+
+}());

app/themes/cards/ui/app/create/create.html

@@ -0,0 +1,116 @@
+<div class="create" ng-if="ctrl.currentUser">
+  <div class="row">
+    <div class="col-sm-2"></div>
+    <h2 class="col-sm-10">Create a Document</h2>
+  </div>
+  <form class="form-horizontal">
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Name</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" placeholder="person's name" ng-model="ctrl.person.name">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">About</label>
+      <div class="col-sm-10">
+        <textarea class="form-control" ui-tinymce="ctrl.editorOptions" ng-model="ctrl.person.about"></textarea>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Greeting</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.greeting" placeholder="How this person should be greeted on login">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Balance</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.balance" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Picture</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.picture" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Age</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.age" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Eye Color</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.eyeColor" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Gender</label>
+      <div class="col-sm-1">
+        <label class="radio-inline"><input type="radio" value="Female" ng-model="ctrl.person.gender" placeholder="">Female</label>
+      </div>
+      <div class="col-sm-1">
+        <label class="radio-inline"><input type="radio" value="Male" ng-model="ctrl.person.gender" placeholder="">Male</label>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Company</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.company" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control" ng-model="ctrl.person.email" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Phone</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.phone" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Address</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" ng-model="ctrl.person.address" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Location</label>
+      <div class="col-sm-5">
+        <input type="text" class="form-control" ng-model="ctrl.person.location.latitude" placeholder="">
+      </div>
+      <div class="col-sm-5">
+        <input type="text" class="form-control" ng-model="ctrl.person.location.longitude" placeholder="">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Tags</label>
+      <div class="col-sm-10">
+        <input type="text" ng-model="ctrl.newTag">
+        <button class="add-feature btn btn-info btn-sm" ng-click="ctrl.addTag()">Add</button>
+      </div>
+      <div class="col-sm-10 col-sm-offset-2">
+        <div class="tag btn btn-info" ng-repeat="tag in ctrl.person.tags">
+          <span>{{tag}}</span>
+          <span class="glyphicon glyphicon-remove-circle" ng-click="ctrl.removeTag($index)"></span>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Active</label>
+      <div class="col-sm-10">
+        <input type="checkbox" ng-model="ctrl.person.isActive">
+      </div>
+    </div>
+
+    <div class="row">
+      <a class="col-sm-offset-10 btn btn-default" ui-sref="root">Cancel</a>
+      <button class="btn btn-primary" ng-click="ctrl.submit()">Submit</button>
+    </div>
+  </form>
+</div>

app/themes/cards/ui/app/detail/detail.html

@@ -0,0 +1,36 @@
+<div class="row detail">
+  <div class="col-sm-9">
+    <uib-tabset type="tabs">
+      <uib-tab active="true">
+        <uib-tab-heading>{{ctrl.type | uppercase}}</uib-tab-heading>
+        <div class="bottom-buffer">
+          <json-explorer ng-if="ctrl.type==='json'" data="ctrl.json"></json-explorer>
+          <pre ng-if="ctrl.type!=='json'" class="pre-xml">{{ctrl.xml}}</pre>
+
+          <a ng-if="ctrl.type==='binary'" target="_blank" ng-href="/v1/documents?uri={{ctrl.uri}}&transform=download" class="btn btn-default">Download</a>
+        </div>
+      </uib-tab>
+      <uib-tab ng-if="ctrl.type!=='json'">
+        <uib-tab-heading>JSON</uib-tab-heading>
+        <div class="bottom-buffer">
+          <json-explorer data="ctrl.json"></json-explorer>
+        </div>
+      </uib-tab>
+      <uib-tab ng-if="ctrl.type==='json'">
+        <uib-tab-heading >XML</uib-tab-heading>
+        <div>
+          <pre class="pre-xml">{{ctrl.xml}}</pre>
+        </div>
+      </uib-tab>
+    </uib-tabset>
+  </div>
+  <div class="col-sm-3">
+    <!-- show (links to) similar documents -->
+    <div class="panel panel-default similar">
+      <div class="panel-heading">Similar</div>
+      <div class="panel-body">
+        <ml-similar uri="{{ctrl.uri}}" limit="5"></ml-similar>
+      </div>
+    </div>
+  </div>
+</div>

app/themes/cards/ui/app/landing/landing.html

@@ -0,0 +1,91 @@
+<section class="content-header">
+  <h1>Successful Deployment! <small>Slush Generator</small></h1>
+</section>
+
+<section class="content landing">
+  <p>You can go check out the sample application once you've logged in! If you loaded the documents from the <em>data</em> directory via the instructions in the readme, you should also be able to <a href="/search">search</a> over the included dictionary. The application allows you to <a href="/create">create</a> various people that you can then <a href="/search">search</a>. If you fill out all the fields, you'll be able to use the built-in <em>faceting</em> and <em>typeahead</em> features!</p>
+  <p>If you need any help making the application your own refer to the links below:</p>
+  <div class="row">
+    <div class="col-md-6">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Slush Generator</h3>
+        </div>
+        <div class="panel-body">
+          <ul>
+            <li><a href="https://github.com/marklogic/slush-marklogic-node">MarkLogic Slush Generator Project Home</a></li>
+            <li><a href="https://github.com/marklogic/slush-marklogic-node/issues">Upcoming Features and Current Issues</a></li>
+            <li><a href="https://github.com/marklogic/slush-marklogic-node/wiki">Wiki</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Recommended Guides and Sites</h3>
+        </div>
+        <div class="panel-body">
+          <ul>
+            <li><a href="https://docs.marklogic.com/">MarkLogic Documentation</a></li>
+            <li><a href="https://github.com/marklogic/roxy/wiki">Deploying MarkLogic Using Roxy</a></li>
+            <li><a href="https://docs.marklogic.com/guide/rest-dev">MarkLogic REST Application Developer's Guide</a></li>
+            <li><a href="https://github.com/marklogic">MarkLogic Github and Helpful Tools</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Stack Technology</h3>
+        </div>
+        <div class="panel-body">
+          <ul>
+            <li><a href="http://www.marklogic.com">Database - MarkLogic</strong></a></li>
+            <li><a href="https://github.com/marklogic/roxy">Build - Roxy</a></li>
+            <li><a href="http://gulpjs.com/">Build - Gulp</a></li>
+            <li><a href="http://nodejs.org/">Webserver - NodeJS</a></li>
+            <li><a href="https://angularjs.org/">Frontend JS - AngularJS</a></li>
+            <li><a href="https://angular-ui.github.io/bootstrap/">Frontend JS - UIBootstrap</a></li>
+            <li><a href="http://getbootstrap.com/">Frontend CSS - Bootstrap</a></li>
+            <li><a href="http://lesscss.org/">Frontend CSS - LESS</a></li>
+            <li><a href="http://karma-runner.github.io">Testing - Karma</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">IDE Suggestions</h3>
+        </div>
+        <div class="panel-body">
+          <ul>
+            <li><a href="http://www.sublimetext.com/3">Sublime Text 3</a>
+              <ul>
+                <li><a href="https://sublime.wbond.net/">Package Control</a>:
+                  <ul>
+                    <li><a href="https://github.com/paxtonhare/MarkLogic-Sublime">MarkLogic Plugin</a></li>
+                    <li><a href="https://github.com/uipoet/sublime-jshint">sublime-jshint</a></li>
+                    <li><a href="https://github.com/alexnj/SublimeOnSaveBuild">SublimeOnSaveBuild</a></li>
+                    <li><a href="https://github.com/sindresorhus/editorconfig-sublime">editorconfig-sublime</a></li>
+                    <li><a href="https://github.com/danro/LESS-sublime">LESS (CSS-style highlighting)</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li><a href="https://www.jetbrains.com/webstorm/">Webstorm</a></li>
+            <li>TextMate (2alpha)
+              <ul>
+                <li><a href="https://github.com/bodnaristvan/JSHint.tmbundle#readme">jshint</a></li>
+                <li><a href="https://github.com/Mr0grog/editorconfig-textmate#readme">editorconfig</a></li>
+                <li><a href="https://github.com/paxtonhare/xquery.tmbundle">MarkLogic auto-completion: XQuery.tmbundle</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

app/themes/cards/ui/app/root/root.html

@@ -0,0 +1,72 @@
+<div>
+  <toast></toast>
+
+  <nav class="navbar navbar-default nav" role="navigation">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="/"><h1 id="logo">Sample App</h1></a>
+    </div>
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav nav-tabs navbar-nav" role="tablist">
+        <li><a href="/">Home</a></li>
+        <li><a href="/search">Search</a></li>
+        <li><a href="/create">Create</a></li>
+      </ul>
+      <ml-user mode="inline"></ml-user>
+    </div><!-- /.navbar-collapse -->
+  </nav>
+
+  <div class="content">
+    <div class="container-fluid">
+      <message-board msg="ctrl.messageBoardService.message()"></message-board>
+      <div ng-hide="ctrl.messageBoardService.message()">
+        <ui-view></ui-view>
+      </div>
+    </div>
+  </div>
+
+  <footer id="footer">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="social-links">
+            <a href="https://www.facebook.com/marklogic" title="Facebook" rel="external">
+              <img src="images/facebook.svg" alt="Facebook" title="Facebook"></a>
+            <a href="https://twitter.com/marklogic" title="Twitter" rel="external">
+              <img src="images/twitter.svg" alt="Twitter" title="Twitter"></a>
+            <a href="http://www.linkedin.com/company/marklogic" title="LinkedIn" rel="external">
+              <img src="images/linkedin.svg" alt="LinkedIn" title="LinkedIn"></a>
+            <a href="https://www.flickr.com/photos/marklogicuc/" title="Flickr" rel="external">
+              <img src="images/flickr.svg" alt="Flickr" title="Flickr"></a>
+            <a href="https://www.youtube.com/channel/UCT2Q5qhC2gmd89K9qpV2TrQ" title="YouTube" rel="external">
+              <img src="images/youtube.svg" alt="YouTube" title="YouTube"></a>
+            <a href="https://plus.google.com/+MarklogicCo/posts" title="Google+" rel="external">
+              <img src="images/google.svg" alt="Google+" title="Google+"></a>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <ul id="menu-footer-navigation-logged-in" class="nav">
+            <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140">
+              <a target="_blank" href="http://www.marklogic.com">MarkLogic.com</a>
+            </li>
+            <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71">
+              <a target="_blank" href="http://developer.marklogic.com">MarkLogic Developers</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="row copyright">
+        <div class="col-sm-12 text-muted">
+          Copyright <sup>&copy;</sup> {{ ctrl.currentYear }} MarkLogic Corporation. MARKLOGIC <sup>&reg;</sup> is a registered trademark of MarkLogic Corporation.
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>

app/themes/cards/ui/app/search/phone.directive.js

@@ -0,0 +1,16 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('app.phone', []);
+  app.directive('phone', function() {
+    return {
+        restrict: 'E',
+        replace: 'true',
+        templateUrl: 'app/search/phone.html',
+        scope: {
+          phoneNumber: '='
+        }
+    };
+
+  });
+}());

app/themes/cards/ui/app/search/phone.html

@@ -0,0 +1 @@
+<span>{{phoneNumber}}</span>

app/themes/cards/ui/app/search/search-results.html

@@ -0,0 +1,17 @@
+<div ng-repeat="result in results" class="result panel panel-default col-md-3">
+  <div class="panel-body">
+    <h4>
+      <a ui-sref="root.view({uri: result.uri})">{{ result.label || result.uri }}</a>
+    </h4>
+    <div class="matches">
+      <div class="match" ng-repeat="match in result.matches">
+        <em ng-repeat="text in match['match-text'] track by $index">
+          <span ng-class="{ highlight: !!text.highlight }">{{ text.highlight || text  }}</span>
+        </em>
+      </div>
+    </div>
+  </div>
+  <div class="panel-footer phone">
+    <i class="fa fa-phone fa-lg"></i><phone phone-number="result.extracted.content[0].phone"></phone>
+  </div>
+</div>