Merge pull request #406 from ashmaroli/static-gem-sticker

Tag static files from a theme-gem with a sticker

Author: mertkahyaoglu

lib/jekyll-admin/apiable.rb

@@ -47,6 +47,10 @@ def to_api(include_content: false)
         output["name"] = basename
       end
 
+      if is_a?(Jekyll::StaticFile)
+        output["from_theme"] = from_theme_gem?
+      end
+
       output
     end
 
@@ -61,6 +65,10 @@ def file_path
       end
     end
 
+    def from_theme_gem?
+      @base == site.in_theme_dir
+    end
+
     # StaticFiles don't have `attr_accesor` set for @site or @name
     def site
       @site

src/components/FilePreview.js

@@ -30,11 +30,25 @@ export default class FilePreview extends Component {
     } else {
       nodeLink = <a href={file.http_url} target="_blank">{node}</a>;
     }
+
+    let overlay;
+    if (file.from_theme) {
+      overlay = (
+        <span className="theme-indicator">
+          <i className="fa fa-diamond" aria-hidden="true" title="Theme Asset" />
+        </span>
+      );
+    } else {
+      overlay = (
+        <button onClick={() => this.handleClickDelete(file.path)} className="delete" title="Delete file">x</button>
+      );
+    }
+
     return (
       <div className="file-preview">
+        {overlay}
         {nodeLink}
         <span className="filename">{file.path}</span>
-        <button onClick={() => this.handleClickDelete(file.path)} className="delete" title="Delete file">x</button>
       </div>
     );
   }

src/components/tests/filepreview.spec.js

@@ -19,6 +19,8 @@ function setup(file=staticfile) {
     filename: component.find('.filename'),
     image: component.find('img'),
     div: component.find('.file-preview a div'),
+    indicator: component.find('.file-preview .theme-indicator'),
+    delete_btn: component.find('.file-preview .delete'),
     actions: actions
   };
 }
@@ -29,9 +31,20 @@ describe('Components::FilePreview', () => {
     expect(image.node).toBeTruthy();
     expect(div.node).toBeFalsy();
   });
+
   it('should render a div if the file does not have an image extension', () => {
     const { image, div } = setup({...staticfile, extname: 'html'});
     expect(image.node).toBeFalsy();
     expect(div.node).toBeTruthy();
   });
+
+  it('should render an indicator if file is from theme-gem', () => {
+    const { indicator } = setup({...staticfile, from_theme: true});
+    expect(indicator.node).toBeTruthy();
+  });
+
+  it('should not render a delete-button if file is from theme-gem', () => {
+    const { delete_btn } = setup({...staticfile, from_theme: true});
+    expect(delete_btn.node).toBeFalsy();
+  });
 });

src/styles/staticfiles.scss

@@ -48,6 +48,21 @@
         display: inline-table;
       }
     }
+    span.theme-indicator {
+      position: absolute;
+      bottom: 40px;
+      left: 0;
+      width: 32px;
+      height: 32px;
+      text-align: left;
+      background: $dark-red;
+      i {
+        margin: 0;
+        padding: 8px 7px 7px;
+        color: white;
+        font-size: 16px;
+      }
+    }
     span.filename {
       font-size: 14px;
       line-height: 2;