kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Updated dropzone hover styling

Browse source
This commit is contained in:
Phil Hughes 2016-04-13 09:08:34 +01:00
parent 094cafcaa7
commit c5d7b467ab
4 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/dropzone_input.js.coffee
View file

@ -15,11 +15,13 @@ class @DropzoneInput
project_uploads_path = window.project_uploads_path or null
max_file_size = gon.max_file_size or 10
form_textarea = $(form).find("textarea.markdown-area")
form_textarea = $(form).find(".js-gfm-input")
form_textarea.wrap "<div class=\"div-dropzone\"></div>"
form_textarea.on 'paste', (event) =>
handlePaste(event)
$mdArea = $(form_textarea).closest('.md-area')
$(form).setupMarkdownPreview()
form_dropzone = $(form).find('.div-dropzone')
@ -49,17 +51,16 @@ class @DropzoneInput
$(".div-dropzone-alert").alert "close"
dragover: ->
form_textarea.addClass "div-dropzone-focus"
$mdArea.addClass 'is-dropzone-hover'
form.find(".div-dropzone-hover").css "opacity", 0.7
return
dragleave: ->
form_textarea.removeClass "div-dropzone-focus"
$mdArea.removeClass 'is-dropzone-hover'
form.find(".div-dropzone-hover").css "opacity", 0
return
drop: ->
form_textarea.removeClass "div-dropzone-focus"
form.find(".div-dropzone-hover").css "opacity", 0
form_textarea.focus()
return

13
app/assets/stylesheets/framework/markdown_area.scss
View file

@ -1,22 +1,15 @@
.div-dropzone-wrapper {
.div-dropzone {
position: relative;
margin-bottom: -5px;
.div-dropzone-focus {
border-color: #66afe9 !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
outline: 0 !important;
}
.div-dropzone-hover {
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -0.6em;
margin-top: -11.5px;
margin-left: -15px;
opacity: 0;
font-size: 50px;
font-size: 30px;
transition: opacity 200ms ease-in-out;
pointer-events: none;
}

8
app/assets/stylesheets/framework/typography.scss
View file

@ -250,14 +250,6 @@ a > code {
* Textareas intended for GFM
*
*/
.js-gfm-input {
font-family: $monospace_font;
color: $gl-text-color;
}
.md-preview {
}
.strikethrough {
text-decoration: line-through;
}

12
app/assets/stylesheets/pages/note_form.scss
View file

@ -40,6 +40,7 @@
}
.note-textarea {
display: block;
padding: 10px 0;
font-family: $regular_font;
border: 0;
@ -72,6 +73,17 @@
}
}
&.is-dropzone-hover {
border-color: $gl-success;
box-shadow: 0 0 2px rgba(#000, .2),
0 0 4px rgba($gl-success, .4);
.comment-toolbar,
.nav-links {
border-color: $gl-success;
}
}
p {
code {
white-space: normal;