Import card-as-card, board-as-card. Add styling. Missing details and links

3 files changed, 51 insertions, 1 deletions

diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index 3f7e0940..95fa6e31 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -1,5 +1,7 @@
 template(name="minicard")
-  .minicard
+  .minicard(
+    class="{{#if importedCard}}imported-card{{/if}}"
+    class="{{#if importedBoard}}imported-board{{/if}}")
     if cover
       .minicard-cover(style="background-image: url('{{cover.url}}');")
     if labels
@@ -13,6 +15,8 @@ template(name="minicard")
       if $eq 'prefix-with-parent' currentBoard.presentParentTask
         .parent-prefix
           | {{ parentCardName }}
+      if imported
+        span.imported-icon.fa.fa-share-alt
       +viewer
         | {{ title }}
       if $eq 'subtext-with-full-path' currentBoard.presentParentTask
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index a98b5730..5202232b 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -6,4 +6,13 @@ BlazeComponent.extendComponent({
   template() {
     return 'minicard';
   },
+  importedCard() {
+    return this.currentData().type === 'cardType-importedCard';
+  },
+  importedBoard() {
+    return this.currentData().type === 'cardType-importedBoard';
+  },
+  imported() {
+    return this.importedCard() || this.importedBoard();
+  },
 }).register('minicard');
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 5624787c..ea737c6b 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -44,6 +44,41 @@
   transition: transform 0.2s,
               border-radius 0.2s
 
+  &.imported-board
+    background-color: #efd8e6
+    &:hover:not(.minicard-composer),
+    .is-selected &,
+    .draggable-hover-card &
+      background: darken(#efd8e6, 3%)
+
+    .is-selected &
+      border-left: 3px solid darken(#efd8e6, 50%)
+
+    .minicard-title
+      font-style: italic
+      font-weight: bold
+
+  &.imported-card
+    background-color: #d5e4bd
+    &:hover:not(.minicard-composer),
+    .is-selected &,
+    .draggable-hover-card &
+      background: darken(#d5e4bd, 3%)
+
+    .is-selected &
+      border-left: 3px solid darken(#d5e4bd, 50%)
+
+    .minicard-title
+      font-style: italic
+
+  &.imported-board
+  &.imported-card
+    .imported-icon
+      display: inline-block
+      margin-right: 11px
+      vertical-align: baseline
+      font-size: 0.9em
+
   .is-selected &
     transform: translateX(11px)
     border-bottom-right-radius: 0
@@ -87,6 +122,8 @@
   .minicard-title
     p:last-child
       margin-bottom: 0
+    .viewer
+      display: inline-block
   .dates
     display: flex;
     flex-direction: row;