From 1cede6f8bed3eb497ff542c2e2c355c4aa31470c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 29 Oct 2014 14:06:08 +0100
Subject: [PATCH] Visual refactor in the wiki layout

---
 app/coffee/modules/wiki/main.coffee |  8 ++--
 app/partials/wiki.jade              |  6 ++-
 app/styles/layout/us-detail.scss    |  1 -
 app/styles/layout/wiki.scss         | 60 +++++++++++++++++++++++++++++
 4 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/app/coffee/modules/wiki/main.coffee b/app/coffee/modules/wiki/main.coffee
index f6a6c3e5..58ca8641 100644
--- a/app/coffee/modules/wiki/main.coffee
+++ b/app/coffee/modules/wiki/main.coffee
@@ -215,9 +215,9 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
                                 $analytics) ->
     template = """
         <div class="view-wiki-content">
-            <section class="wiki-content wysiwyg"
+            <section class="wysiwyg"
                      tg-bind-html="wiki.html"></section>
-            <span class="edit icon icon-edit" href="" title="Edit"  style="display: none;"/>
+            <span class="edit icon icon-edit" title="Edit"></span>
         </div>
         <div class="edit-wiki-content" style="display: none;">
             <textarea placeholder="Write your wiki page here"
@@ -299,7 +299,9 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
             return if not wikiPage
             $scope.wiki = wikiPage
 
-            if not isEditable()
+            if isEditable()
+                $el.addClass('editable')
+            else if not isEditable()
                 disableEdition()
             else if not wikiPage.id?
                 switchToEditMode()
diff --git a/app/partials/wiki.jade b/app/partials/wiki.jade
index e96693a7..fb0a7578 100644
--- a/app/partials/wiki.jade
+++ b/app/partials/wiki.jade
@@ -18,6 +18,8 @@ block content
             div.summary.wiki-summary(tg-wiki-summary, ng-model="wiki", ng-if="wiki.id")
             section.wiki-content(tg-editable-wiki-content, ng-model="wiki")
 
-            button.remove(ng-click="ctrl.delete()", ng-if="wiki.id") Remove this wiki page.
-
             tg-attachments(ng-model="wiki", type="wiki_page", ng-if="wiki.id")
+
+            a.remove(href="", ng-click="ctrl.delete()", ng-if="wiki.id", title="Remove this wiki page")
+                span.icon.icon-delete
+                span Remove this wiki page
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index 68e85355..97f45742 100644
--- a/app/styles/layout/us-detail.scss
+++ b/app/styles/layout/us-detail.scss
@@ -195,7 +195,6 @@
     }
     .edit {
         color: $grayer;
-
     }
     .view-description {
         .edit {
diff --git a/app/styles/layout/wiki.scss b/app/styles/layout/wiki.scss
index d8cfd8fb..b13bc2a9 100644
--- a/app/styles/layout/wiki.scss
+++ b/app/styles/layout/wiki.scss
@@ -1,3 +1,63 @@
+.wiki {
+    .remove {
+        @extend %small;
+        color: $gray-light;
+        &:hover {
+            span {
+                @include transition(color .2s linear);
+                color: $grayer;
+            }
+            .icon {
+                @include transition(color .2s linear);
+                color: $red;
+            }
+        }
+        .icon {
+            color: $gray-light;
+            margin-right: .3rem;
+        }
+    }
+}
+
 .wiki-content {
     margin-bottom: 2rem;
+    position: relative;
+    .view-wiki-content {
+        &:hover {
+            .wysiwyg {
+                background: $whitish;
+                cursor: pointer;
+            }
+            .edit {
+                @include transition(all .2s linear);
+                opacity: 1;
+                top: -1.5rem;
+            }
+        }
+        .edit {
+            @include transition(all .2s linear);
+            background: $whitish;
+            left: 0;
+            opacity: 0;
+            padding: .2rem .5rem;
+            position: absolute;
+            top: 0;
+        }
+    }
+    .edit-wiki-content {
+        .preview-icon {
+            position: absolute;
+            right: 3.5rem;
+        }
+        .action-container {
+            position: absolute;
+            right: 1rem;
+            top: .3rem;
+        }
+        .edit {
+            position: absolute;
+            right: 3.5rem;
+            top: .4rem;
+        }
+    }
 }