new.html.haml in tenon-2.0.0

- old
+ new
@@ -1,24 +1,22 @@
-.modal-tab-pane.tab-content
-  - unless params[:hide_upload]
-    #upload-asset
-      %h5= t('tenon.assets.from_your_computer')
-      #progress
-      = form_for Tenon::Asset.new, format: 'json', builder: Tenon::FormBuilder do |f|
-        = error_messages_for :asset
-        .fields.full
-          .form-group
-            .browse-button-holder.solo
-              .fileupload.btn.btn-comp.browse
-                %span#choose-files= t('tenon.common.browse')
-                %input{ :type => 'file', :class => 'upload', multiple: defined?(multiple) && multiple, style: 'width: 100%;', name: 'asset[attachment]' }
-        .spacer
+.modal.modal--fixed-footer
+  .modal__content
+    %h2 Choose Asset
+    - unless params[:hide_upload]
+      .upload-asset
+        %h3 From Your Device
+        .progress-container
+        = form_for Tenon::Asset.new, format: 'json', builder: Tenon::FormBuilder do |f|
+          .input-block
+            %label.btn{ for: 'file-upload' } Browse
+            %input#file-upload.upload{ type: 'file', multiple: defined?(multiple) && multiple, style: 'position: absolute; left: -9999px;', name: 'asset[attachment]' }
 
-  #pick-asset
-    %h5= t('tenon.assets.from_the_asset_library')
+    %h3 From The Asset Library
+    #pick-asset
+      = react_component 'Tenon.RI.StandaloneList',
+        title: 'Assets',
+        recordsPath: assets_path(format: 'json'),
+        newPath: new_asset_path,
+        childComponentNames: { List: 'AssetList', Record: 'AssetRecord' }
 
-    .filter= text_field_tag :q, '', id: 'quick-search', class: 'filter search', placeholder: t('tenon.assets.filter_assets'), data: { 'record-list' => '.asset-list' }
-
-    .asset-list-scroller
-      %ul#modal-asset-list.asset-list.record-grid.infinite-scroll{ data: { records: { url: assets_path(format: 'json'), template: 'tenon/templates/assets/asset_row', name: 'asset' } } }
-
-      = link_to t('tenon.assets.load_more'), '#', :class => 'infinite-loader', 'data-record-list' => '#modal-asset-list'
+  .modal__footer
+    %a.modal__action{ href: '#!', data: { modal_close: true } } Cancel