[FileDropper] Designed file dropper · Issue #801 · KleeGroup/focus-components · GitHub

[Pandakls]

Context

According to Focus philosophy, the filedropper component need to be designed. I made my own version for the project (with a text that can be modified)

Here the result :

Actual behaviour

No real design is proposed.

Expected behaviour

Some css to design it !

Versions

"focus-components": "^0.7.10-rc4",
"focus-core": "^0.12.1-rc3",
"focus-file": "^0.1.2",

Tips

Here the code that i made to have the result :

.upload {
  background: white url("../img/upload.png") no-repeat;
  background-position: center;
  opacity: 0.2;
  text-align: center;

  .dropzone {
    background: inherit;
    border: none;
  }
  [data-focus=file-upload] [data-focus=file-upload-dropzone] {
    border-radius: 10px;
    cursor: pointer;
  }
}

.upload:after {
  color: black; //#959595;
  font-size: 20px;
  position:relative;
  bottom: 30px;
  text-transform: uppercase;
  content: "Cliquez pour selectionner un fichier ou deposez le ici";
  pointer-events: none;
  margin-left: 10px;
  margin-right: 10px;
}

Limits :
The text given in css cannot be translate, doesn't handle accents.
The function "pointer-events: none;" that allows to click through the text isn't handled in IE
The background opacity that colors my stuff in grey also affect the picture of loaded file.

I think the text parameter should be given through params to the file loader to solve a lot of problems.