#79 styling of matches and the dialog view

src/Our.Umbraco.Look.BackOffice/Client/Controllers/DetailsController.js

@@ -5,12 +5,16 @@
         .module('umbraco')
         .controller('Look.BackOffice.DetailsController', DetailsController);
 
-    DetailsController.$inject = ['$scope', 'Look.BackOffice.MatchService'];
+    DetailsController.$inject = ['$scope', 'dialogService', 'Look.BackOffice.MatchService'];
 
-    function DetailsController($scope, matchService) {
+    function DetailsController($scope, dialogService, matchService) {
 
         $scope.viewData = {
-            debug: matchService
+            match: matchService.selectedMatch
+        };
+
+        $scope.hideDetails = function () {
+            dialogService.closeAll();
         };
 
     }

src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js

@@ -87,6 +87,7 @@
 
 
         $scope.reload = function () {
+            dialogService.closeAll();
             reset();
         };
 

src/Our.Umbraco.Look.BackOffice/Client/Look.css

@@ -29,6 +29,8 @@
 .look-body {
 }
 
+/* Searcher */
+
     .look-body dl {
         display: flex;
         flex-flow: row wrap;
@@ -50,11 +52,13 @@
         border-bottom: 1px dashed lightgrey;
     }
 
-    .look-body a {
+    /*.look-body a {
         text-decoration: underline;
         color:blue;
-    }
+    }*/
+
 
+/* Matches */
 
 .look-match-breaker {
     font-size:x-large;
@@ -78,13 +82,13 @@
 }
 
 
-
 .look-match-score {
     float: right;
     font-size: xx-small;
-    border: solid 1px black;
 }
 
+
+
 .look-match-type {
     float: left;
     position:relative;
@@ -108,47 +112,13 @@
 }
 
 
-.look-match-details {
-    border: solid 1px grey;
+.look-match-checkboxes {
     float: left;
-    width:40%;
-}
-
-    .look-match-details div {
-    }
-
-    .look-match-details div span {
-        font-size:small;
-    }
-
-
-.look-match-tags {
-    float:left;
-    border: solid 1px grey;
-    font-size:small;
-}
-
-.look-match-no-tags {
-
 }
 
-.look-match-tag-group {
-}
-
-.look-match-tag {
-}
-
-
-.look-match-text {
-    float: left;
-    border: solid 1px grey;
-    font-size: small;
-}
-
-.look-match-location {
+.look-match-details {
+    margin-left:30px;
     float: left;
-    border: solid 1px grey;
-    font-size: small;
 }
 
 
@@ -157,4 +127,14 @@
     border:solid 2px green;
     text-align:center;
     padding:30px;
-}
+}
+
+/* Details */
+
+.look-details {
+    margin:0 10px;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x:hidden;
+}
+

src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html

@@ -1,5 +1,43 @@
-<div ng-controller="Look.BackOffice.DetailsController">
-    <p>Details</p>
+<div ng-controller="Look.BackOffice.DetailsController" ng-mouseleave="hideDetails()" class="look-details">
+
+    <h2>{{ viewData.match.name }}</h2>
+
+    <div><span>Date: </span> {{ viewData.match.date | date:'d MMMM yyyy, HH:mm:ss' }}</div>
+    <div><span>Path: </span> {{ viewData.match.path}}<a href="{{ viewData.match.link }}">{{ viewData.match.linkText }}</a>{{ viewData.match.isDetached ? '\\' +  viewData.match.name : '' }}</div>
+    <div><span>Culture: </span> {{ viewData.match.culture }}</div>
+    <div><span>Id: </span>{{ viewData.match.id }}</div>
+    <div><span>Key: </span>{{ viewData.match.key }}</div>
+
+    <div ng-if="viewData.match.hasTags">
+        <hr/>
+        <span>Tags: </span>
+
+        <div ng-repeat="tagGroup in viewData.match.tagGroups">
+            <br/>
+
+            <span class="icon icon-tags">&nbsp;</span>
+
+            <a ng-if="tagGroup.link !== null" href="{{tagGroup.link}}">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</a>
+            <span ng-if="tagGroup.link === null">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</span>
+
+            <ul>
+                <li ng-repeat="tag in tagGroup.tags">
+
+                    <span class="icon icon-tag">&nbsp;</span>
+                    <a ng-if="tag.link !== null" href="{{tag.link}}">{{tag.name}}</a>
+                    <span ng-if="tag.link === null">{{tag.name}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div ng-if="viewData.match.hasLocation">
+        <hr/>
+        <span>Location: </span>
+        <br/>
+
+    </div>
+
+    <!--<pre>{{ viewData | json}}</pre>-->
 
-    <pre>{{ viewData | json}}</pre>
 </div>

src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html

@@ -10,47 +10,27 @@
             <div class="look-match" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showDetails(match)">
 
                 <span class="look-match-score">{{match.score}}</span>
+
 
                 <span class="look-match-type{{match.isDetached ? ' look-match-detached' : ''}}">
                     <span class="look-match-detached-icon icon-out" ng-if="match.isDetached">&nbsp;</span>
                     <span class="look-match-icon {{match.icon}}">&nbsp;</span>                                        
                 </span>
 
-                <!--<span class="match-id">{{match.id}}</span> |-->
-                <!--<span class="match-key">{{match.key}}</span> |--> 
+                <div class="look-match-checkboxes">
+                    <div><span class="{{ match.hasText ? 'icon-checkbox' : 'icon-checkbox-empty' }}">&nbsp;</span>Text</div>
+                    <div><span class="{{ match.hasTags ? 'icon-checkbox' : 'icon-checkbox-empty' }}">&nbsp;</span>Tags</div>
+                    <div><span class="{{ match.hasLocation ? 'icon-checkbox' : 'icon-checkbox-empty' }}">&nbsp;</span>Location</div>
+                </div>
+
 
                 <div class="look-match-details">
                     <div><span>Name: </span> {{match.name}}</div>
                     <div><span>Date: </span> {{match.date | date:'d MMMM yyyy, HH:mm:ss'}}</div>
                     <div><span>Path: </span> {{match.path}}<a href="{{match.link}}">{{match.linkText}}</a>{{ match.isDetached ? '\\' + match.name : ''}}</div>
-                    <div><span>Culture: </span> {{match.culture}}</div>
-                </div>
-
-                <div class="look-match-tags">
-                    <span class="look-match-no-tags" ng-if="match.tagGroups.length === 0">No Tags</span>
-                    <div class="look-match-tag-group" ng-repeat="tagGroup in match.tagGroups">
-                        <span class="icon icon-tags">&nbsp;</span>
-                        <a ng-if="tagGroup.link !== null" href="{{tagGroup.link}}">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</a>
-                        <span ng-if="tagGroup.link === null">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</span>
-
-                        <span class="look-match-tag" ng-repeat="tag in tagGroup.tags">
-                            <span class="icon icon-tag">&nbsp;</span>
-                            <a ng-if="tag.link !== null" href="{{tag.link}}">{{tag.name}}</a>
-                            <span ng-if="tag.link === null">{{tag.name}}</span>
-                            <!--{{ $last ? '.' : ', '}}-->
-                        </span>
-                    </div>
-                </div>
-
-
-                <div class="look-match-text">
-                    Has Text: {{ match.hasText ? 'Yes' : 'No'}}
-                </div>
-
-                <div class="look-match-location">
-                    Has Location: {{ match.hasLocation ? 'Yes' : 'No'}}
                 </div>
 
+
                 <div style="clear:both;"></div>
             </div>
 

src/Our.Umbraco.Look.BackOffice/Models/Api/MatchesResult.cs

@@ -55,15 +55,15 @@ public class Match
             [JsonProperty("date")]
             public DateTime? Date { get; set; }
 
-            //[JsonProperty("hasTags")]
-            //public bool HasTags { get; set; }
+            [JsonProperty("hasText")]
+            public bool HasText { get; set; }
+
+            [JsonProperty("hasTags")]
+            public bool HasTags { get; set; }
 
             [JsonProperty("tagGroups")]
             public TagGroup[] TagGroups { get; set; }
 
-            [JsonProperty("hasText")]
-            public bool HasText { get; set; }
-
             [JsonProperty("hasLocation")]
             public bool HasLocation { get; set; }
 
@@ -175,6 +175,8 @@ public static explicit operator Match(LookMatch lookMatch)
                 match.IsDetached = lookMatch.IsDetached;
                 match.Date = lookMatch.Date;
 
+                match.HasText = !string.IsNullOrWhiteSpace(lookMatch.Text);
+
                 var tags = lookMatch
                                 .Tags
                                 .Select(x => new Tag()
@@ -185,6 +187,8 @@ public static explicit operator Match(LookMatch lookMatch)
                                 })
                                 .ToArray();
 
+                match.HasTags = tags.Any();
+
                 match.TagGroups = tags
                                     .Select(x => x.Group)
                                     .Distinct()
@@ -197,7 +201,7 @@ public static explicit operator Match(LookMatch lookMatch)
                                     })
                                     .ToArray();
 
-                match.HasText = !string.IsNullOrWhiteSpace(lookMatch.Text);
+
                 match.HasLocation = lookMatch.Location != null;
 
                 return match;