COR-704: Rebuild AssetFieldType with Shrine

app/assets/stylesheets/cortex-plugins-core/application.scss

@@ -0,0 +1,5 @@
+// TODO: These two files should be removed once we abstract Cortex styles to a cortex-style-base lib
+@import 'variables/colors';
+@import 'variables/typography';
+
+@import 'components/thumbnail-placeholder';

app/assets/stylesheets/cortex-plugins-core/components/thumbnail-placeholder.scss

@@ -0,0 +1,13 @@
+.thumbnail-placeholder {
+  background-color: $color-grey-evenlighter;
+  display: flex;
+  height: 50px;
+  width: 50px;
+
+  .h4 {
+    text-transform: uppercase;
+    align-self: center;
+    text-align: center;
+    width: 100%;
+  }
+}

app/assets/stylesheets/cortex-plugins-core/variables/_colors.scss

@@ -0,0 +1,47 @@
+// Color Definitions
+
+$color-teal: #63C0B9;
+$color-teal-dark: #54A1A1;
+$color-teal-light: #A1D9D5;
+
+$color-orange: #F79C25;
+$color-orange-dark: #E78523;
+$color-orange-light: #FED473;
+
+$color-anchor-blue-light: #747D8E;
+
+$color-green: #009b74;
+
+$color-slate-grey: #6E788F;
+$color-grey: #BBB; // Type
+$color-grey-dark: #333; // Type, Sidebar background, Login page background
+$color-grey-light: #D4D4D4; // Content background color
+$color-grey-lightest: #DDD; // Disabled and flat button background color
+$color-grey-evenlighter: #E4E4E4;
+$color-grey-reallylight: #F2F2F2;
+$color-grey-extralight: #F4F4F4; // Wizard Instruction Panel background color
+
+$color-red: #d85252;
+
+$color-white: white; // Header
+$color-black: #000000;
+
+
+// Color Semantics
+
+$employer-color: $color-teal;
+$employer-color-dark: $color-teal-dark;
+$employer-color-light: $color-teal-light;
+
+$flash-error-background: $color-red;
+$flash-success-background: $color-green;
+
+$ar-color: $color-orange;
+$ar-color-dark: $color-orange-dark;
+$ar-color-light: $color-orange-light;
+
+$notes-text: #6E788F;
+
+$jumbo-button-text: #6E788F;
+$jumbo-button-hover-background: $color-grey-evenlighter;
+$jumbo-button-active-background: $color-grey-reallylight;

app/assets/stylesheets/cortex-plugins-core/variables/_typography.scss

@@ -0,0 +1,114 @@
+@font-face {
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: normal;
+  src: url(asset_path('Montserrat-Regular.otf')) format("opentype");
+}
+
+@font-face {
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: bold;
+  src: url(asset_path('Montserrat-Medium.otf')) format("opentype");
+}
+
+@font-face {
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: bolder;
+  src: url(asset_path('Montserrat-SemiBold.otf')) format("opentype");
+}
+
+@font-face {
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: lighter;
+  src: url(asset_path('Montserrat-Light.otf')) format("opentype");
+}
+
+$cortex-font-stack: Montserrat, sans-serif;
+$base-font-size: 1rem;
+
+%display-text { // Cortex Logo
+  color: $color-grey-dark;
+  font-family: $cortex-font-stack;
+  font-weight: normal;
+  font-size: 2.1775rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.5;
+}
+
+h1,
+.text-style-1 { // Bread Crumbs and Page Headers
+  color: $color-teal;
+  font-family: $cortex-font-stack;
+  font-weight: bold;
+  font-size: 1.17rem;
+  text-decoration: none;
+}
+
+h2,
+.text-style-2 {
+  color: $color-grey;
+  font-family: $cortex-font-stack;
+  font-weight: lighter;
+  font-size: 1.17rem;
+}
+
+h3,
+.text-style-3 {
+  color: $color-grey;
+  font-family: $cortex-font-stack;
+  font-weight: bold;
+  font-size: 1.17rem;
+}
+
+h4,
+.text-style-4 { // Section Headers, Dropdowns, Button Text
+  color: $color-grey-dark;
+  font-family: $cortex-font-stack;
+  font-size: 0.83rem;
+}
+
+h5,
+.text-style-5 { // Field Text
+  color: $color-grey;
+  font-family: $cortex-font-stack;
+  font-weight: lighter;
+  font-size: $base-font-size;
+}
+
+h6,
+.text-style-6 { // Field Text Filled
+  color: $color-anchor-blue-light;
+  font-family: $cortex-font-stack;
+  font-size: $base-font-size;
+}
+
+.text-style-7 { // Help Notes
+  color: $color-anchor-blue-light;
+  font-family: $cortex-font-stack;
+  font-weight: lighter;
+  font-size: 0.67rem;
+}
+
+%sidebar-nav { // Side Nav
+  color: $color-grey;
+  font-family: $cortex-font-stack;
+  font-weight: lighter;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+
+  &.active { // Side Nav Selected
+    font-weight: bold;
+    color: $color-teal;
+  }
+}
+
+p {
+  color: $color-anchor-blue-light;
+  font-family: $cortex-font-stack;
+  font-size: $base-font-size;
+}

app/cells/plugins/core/asset_cell.rb

@@ -19,8 +19,12 @@ def render_allowed_asset_extensions
         field.validations['allowed_extensions']&.join(', ')
       end
 
+      def allowed_asset_extensions_for_form
+        '.' + field.validations['allowed_extensions']&.join(',.')
+      end
+
       def render_max_asset_size
-        number_to_human_size(field.validations['size']&.[]('less_than'))
+        number_to_human_size(field.validations['max_size'])
       end
 
       def input_classes
@@ -36,15 +40,16 @@ def render_label
       end
 
       def render_input
-        @options[:form].file_field 'data[asset]'
+        @options[:form].file_field 'data[asset]', accept: allowed_asset_extensions_for_form
       end
 
       def render_tooltip
         @options[:tooltip]
       end
 
       def associated_content_item_thumb_url
-        data['asset']['style_urls']['mini']
+        # TODO: The thumb version needs to be configurable
+        data['asset']['versions']['mini']['url']
       end
 
       def render_associated_content_item_thumb

app/cells/plugins/core/asset_info/index.haml

@@ -1,2 +1,6 @@
-- if asset
-  = image_tag(asset['style_urls'][config[:thumbnail_style]], height: '50px')
+- if asset && asset['versions'][config[:thumbnail_style]]
+  = image_tag(asset['versions'][config[:thumbnail_style]]['url'], height: '50px')
+- else
+  .thumbnail-placeholder
+    .h4
+      = asset['versions']['original']['extension']

app/cells/plugins/core/asset_info/show.haml

@@ -4,24 +4,26 @@
       new Clipboard('#copy-asset-url');
     });
 
-  .asset-info.mdl-card.mdl-shadow--2dp
-    .mdl-card__title
-      %h2.mdl-card__title-text
-        = image_tag(asset['url'], style: 'max-height: 200px;')
+  .asset-info.mdl-card
+    - if asset_is_image?
+      .mdl-card__title
+        %h2.mdl-card__title-text
+          = image_tag(asset['versions']['original']['url'], style: 'max-height: 200px;')
     .mdl-card__supporting-text
       %dl
         %dt Original Filename
         %dd
-          = asset['file_name']
-        %dt File Type
+          = asset['original_filename']
+        %dt Original File Type
         %dd
-          = asset['content_type']
-        %dt File Size
+          = asset['versions']['original']['mime_type']
+        %dt Original File Size
         %dd
-          = number_to_human_size(asset['file_size'])
-        %dt Dimensions
-        %dd
-          = dimensions
+          = number_to_human_size(asset['versions']['original']['file_size'])
+        - if asset_is_image?
+          %dt Original Dimensions
+          %dd
+            = dimensions
         %dt Creator
         %dd
           = creator.fullname
@@ -35,7 +37,7 @@
         %dd
           = link_to_asset
     .mdl-card__menu
-      .mdl-button.mdl-button--icon.mdl-js-button.mdl-js-ripple-effect#copy-asset-url{data: {'clipboard-text': asset['url']}}
+      .mdl-button.mdl-button--icon.mdl-js-button.mdl-js-ripple-effect#copy-asset-url{data: {'clipboard-text': asset['versions']['original']['url']}}
         %i.material-icons content_copy
       .mdl-tooltip{for: 'copy-asset-url'}
         Copy Asset URL

app/cells/plugins/core/asset_info_cell.rb

@@ -25,7 +25,7 @@ def asset
       end
 
       def dimensions
-        "#{asset['dimensions']['width']} x #{asset['dimensions']['width']}"
+        "#{asset['versions']['original']['dimensions']['width']} x #{asset['versions']['original']['dimensions']['width']}"
       end
 
       def creator
@@ -37,11 +37,19 @@ def created_at
       end
 
       def updated_at
-        DateTime.parse(asset['updated_at']).to_formatted_s(:long_ordinal)
+        content_item.updated_at.to_formatted_s(:long_ordinal)
       end
 
       def link_to_asset
-        link_to asset['url'], asset['url'], target: '_blank'
+        link_to asset['versions']['original']['url'], asset['versions']['original']['url'], target: '_blank'
+      end
+
+      def asset_type
+        MimeMagic.new(asset['versions']['original']['mime_type']).mediatype
+      end
+
+      def asset_is_image?
+        asset_type == 'image'
       end
     end
   end