Open jerefrer opened 10 years ago
Good idea!
Since I need it for my app I made a working implementation of the first idea: show the same image/filename/delete link combo below the preview image as there is in the picker itself.
The thing is I did it for the SimpleForm branch mentionned in a pull request, as I don't use Formtastic. But most of the logic is not related to the inputs anyway. You can check it out here : https://github.com/jerefrer/rich/commit/4673cdcc353badd8d9b3b8aa4cfa7bfecf603692
Also, to have the same styles as in the editor I had to use this bit of sass:
// Mixins
@mixin rounded($radius: 4px)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
@mixin box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue)
box-shadow: $x $y $blur $color
-moz-box-shadow: set $x $y $blur $color
-webkit-box-shadow: $x $y $blur $color
// Preview image
.rich-image-preview
@include rounded
@include box-shadow(0, 0, 4px, lighten(#686868, 40%))
.rich-image-preview-details
position: relative
.rich-image-preview-filename
font-size: 10px
margin: 0
line-height: 17px
height: 20px
overflow: hidden
text-overflow: ellipsis
color: #888888
width: 80px
.rich-image-preview-delete
position: absolute
text-indent: -9999px
margin-left: 80px
margin-top: -20px
width: 20px
height: 20px
background: url(/assets/rich/x-red.png) no-repeat right 5px
opacity: 0.5
&:hover
opacity: 1
How to allow the user to remove a file added with RichPicker ?
Why not have a little cross over the image that resets the form field value, just like it's done in the picker itself ? Or add a "no image" choice in the picker ?
I know one can hack his own solution but why not embed this since it's I think a pretty common need ?