new.html.slim

- provide :title, ts(:title)

- page_header :projects

= form_for [@workspace, @project, Upload.new], html: { class: 'form-horizontal' } do |f|
  div class="panel panel-default panel-upload"
    / div class="panel-heading"
      div class="panel-title" Upload Files

    / div class="panel-body text-center"
      = material_icon 'cloud-upload', class: 'new-upload-icon'
      h3 style="margin: 10px 0 20px;" Select the files you want to upload
      a class="btn btn-primary" Select Files

    div class="panel-body" style="border-color: #eee;"
      / div class="pull-right" style="margin: 0 20px;"
        = material_icon 'cloud-upload', class: 'new-upload-icon'
      h3 class="text-primary" style="margin-bottom: 5px;"
        strong Uploading Files...
      p class="text-muted" Please wait while your files are uploaded. Your upload is not complete until you submit the form.
    table class="table table-hover"
      colgroup
        col width="5%"
        col width="40%"
        col width="5%"
        col width="40%"
        col
      tbody
        tr class="upload_document"
          td = material_icon 'cloud-upload', class: 'icon-lg text-faint'
          td style="font-size: 13px;" BHSM15-EST-AP-0001-PLA-LOC.PDF
          td class="text-faint text-right" style="font-size: 12px; font-weight: 600;" 70%
          td
            div class="progress upload_progress"
              div class="progress-bar progress-bar-success" style="width:70%;"
          td
        tr class="upload_document upload_document--danger"
          td = material_icon 'error', class: 'icon-lg upload-progress-icon--danger'
          td style="font-size: 13px;" BHSM15-EST-AP-0006-PLA-COB.DXF
          td class="text-right" = material_icon 'close', class: 'upload-progress-icon upload-progress-icon--danger icon-lg'
          td
            div class="progress upload_progress"
              div class="progress-bar progress-bar-danger" style="width:100%;"
          td
        tr class="upload_document upload_document--success"
          td = material_icon 'cloud-done', class: 'icon-lg upload-progress-icon--success'
          td style="font-size: 13px;" BHSM15-EST-AP-0001-PLA-LOC.PLT
          td class="text-right text-success" style="font-size: 12px; font-weight: 600; color: #5acd6a;" 100%
          td
            div class="progress upload_progress"
              div class="progress-bar progress-bar-success" style="width:100%;"
          td
            = link_to '#', class: 'icon-link icon-link--danger'
              = material_icon 'delete'
        tr class="upload_document upload_document--success"
          td = material_icon 'cloud-done', class: 'icon-lg upload-progress-icon--success'
          td style="font-size: 13px;" BHSM15-EST-AP-0006-PLA-COB.PLT
          td class="text-right text-success" style="font-size: 12px; font-weight: 600; color: #5acd6a;" 100%
          td
            div class="progress upload_progress"
              div class="progress-bar progress-bar-success" style="width:100%;"
          td
            = link_to '#', class: 'icon-link icon-link--danger'
              = material_icon 'delete'
        tr class="upload_document"
          td = material_icon 'cloud-upload', class: 'icon-lg text-faint'
          td style="font-size: 13px;" BHSM15-EST-AP-0006-PLA-COB.PLT
          td class="text-faint text-right" style="font-size: 12px; font-weight: 600;" 32%
          td
            div class="progress upload_progress"
              div class="progress-bar progress-bar-success" style="width:32%;"
          td

    div class="panel-body" style="border-color: #eee;"
      h3 class="text-primary" style="margin-bottom: 5px;"
        strong Notify People
      p class="text-muted" Choose the people you want to notify about this upload.

    table class="table table-hover" style="border-color: #eee;"
      thead
        tr class="upload_document"
          td colspan="6"
            = link_to "Select All"
            span<> &nbsp;
            = link_to "Select None"
      tbody
        - @workspace.members.each_slice(3) do |slice|
          tr class="upload_document"
            - slice.each do |user|
              - user = exhibit(user, self)
              td width="30px" = check_box_tag :notify
              td
                => user.avatar size: 30
                span style="font-size: 13px; margin-left: 10px;" = user.name

    div class="panel-body" style="border-color: #eee;"
      br
      div class="form-group"
        = f.label :description, "Include a message", class: 'col-lg-2 control-label', style: 'font-weight: 400;'
        div class="col-lg-6"
          div class="input_with_icon"
            = f.text_field :description, class: 'form-control', placeholder: "Describe what you are uploading"
            = material_icon 'chat'
    div class="panel-footer"
      div class="row"
        div class="col-lg-3 col-lg-offset-2"
          = f.button ts(:finish_upload), data: { disable_with: disable_with_icon }, class: 'btn btn-primary'

/ div class="row"
  div class="col-lg-12 text-center"
    = form_for [@workspace, @project, Upload.new], html: { class: 'new-upload' } do |f|
      div class="new-upload-fake-input js-new-upload-fake-input"
        = material_icon 'cloud-upload', class: 'new-upload-icon'
        h1 class="text-primary" = ts :upload_files
        p = ts :browse_files
        = f.attachment_field :documents_files, multiple: true, presigned: true
      div class="row new-upload-progress js-new-upload-progress"
        h3 class="text-primary" = ts :uploading
      = f.button ts(:continue), data: { disable_with: disable_with_icon }, class: 'btn btn-success'

upload.scss

.upload_document td {
  border-color: #efefef !important;
  // height: 70px !important;
  // padding-bottom: 20px !important;
  // padding-top: 20px !important;
  vertical-align: middle !important;

  &:first-child {
    padding-left: 15px;
  }
}

.upload_document--danger:hover td {
  background-color: lighten($brand-danger, 37%);
  border-color: lighten($brand-danger, 33%) !important;
}

.upload_document--success:hover td {
  background-color: lighten($brand-success, 37%);
  border-color: lighten($brand-success, 33%) !important;
}

.upload_progress {
  height: 6px;
  margin-bottom: 0;
}

.panel-upload {
  background-color: #fcfcfc;
  border: none;
  box-shadow: none;

  .panel-body:first-child {
    padding-top: 0;
  }

  .panel-footer {
    background-color: #fcfcfc;
    border-color: #eee;
  }
}

// .new-upload-fake-input {
//   position: relative;
//   text-align: center;
// }

// .new-upload-submit {
//   margin: 20px 0;
// }

// // This is the auto generated id by Rails
// #upload_documents_files,
// #upload_attachments_files {
//   // bottom: 0;
//   // cursor: pointer;
//   // left: 0;
//   // opacity: 0;
//   // position: absolute;
//   // right: 0;
//   // top: 0;

//   // These values have to be at the bottom because of precedence
//   // height: 100%;
//   // width: 100%;
// }

.new-upload-icon {
  color: $brand-background-complement;
  font-size: 50px;
  margin: 0;
}

// .new-upload-progress {
//   display: none;
// }