Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
New layout for image overlay in library.
This new overlay combines a large image preview, the edit form and usage info.
  • Loading branch information
Thomas von Deyen committed Aug 11, 2015
1 parent ceddb02 commit 9cacf69
Show file tree
Hide file tree
Showing 20 changed files with 314 additions and 197 deletions.
10 changes: 6 additions & 4 deletions app/assets/javascripts/alchemy/alchemy.dialog.js.coffee
Expand Up @@ -9,6 +9,7 @@ class window.Alchemy.Dialog
title: ''
modal: true
overflow: 'visible'
draggable: true
ready: ->
closed: ->

Expand All @@ -34,10 +35,11 @@ class window.Alchemy.Dialog
window.requestAnimationFrame =>
@dialog_container.addClass('open')
@overlay.addClass('open') if @overlay?
@dialog.draggable
iframeFix: true
handle: '.alchemy-dialog-title'
containment: 'parent'
if @options.draggable
@dialog.draggable
iframeFix: true
handle: '.alchemy-dialog-title'
containment: 'parent'
@$body.addClass('prevent-scrolling')
Alchemy.currentDialogs.push(this)
@load()
Expand Down
31 changes: 31 additions & 0 deletions app/assets/javascripts/alchemy/alchemy.image_overlay.coffee
@@ -0,0 +1,31 @@
class window.Alchemy.ImageOverlay extends Alchemy.Dialog

constructor: (url) ->
@options =
draggable: false
ready: (dialog) ->
Alchemy.ImageLoader(dialog)
return
super(url, @options)
return

init: ->
$('#zoomed_picture_background').click (e) =>
e.stopPropagation()
return if e.target.nodeName == 'IMG'
@close()
false
super()

build: ->
@dialog_container = $('<div class="alchemy-image-overlay-container" />')
@dialog = $('<div class="alchemy-image-overlay-dialog" />')
@dialog_body = $('<div class="alchemy-image-overlay-body" />')
@close_button = $('<a class="alchemy-image-overlay-close"><span class="icon close small"></span></a>')
@dialog.append(@close_button)
@dialog.append(@dialog_body)
@dialog_container.append(@dialog)
@overlay = $('<div class="alchemy-image-overlay" />')
@$body.append(@overlay)
@$body.append(@dialog_container)
@dialog
1 change: 1 addition & 0 deletions app/assets/javascripts/alchemy/alchemy.js
Expand Up @@ -37,6 +37,7 @@
//= require alchemy/alchemy.hotkeys
//= require alchemy/alchemy.i18n
//= require alchemy/alchemy.image_cropper
//= require alchemy/alchemy.image_overlay
//= require alchemy/alchemy.string_extension
//= require alchemy/alchemy.link_dialog
//= require alchemy/alchemy.list_filter
Expand Down
13 changes: 4 additions & 9 deletions app/assets/javascripts/alchemy/alchemy.windows.js.coffee
Expand Up @@ -2,15 +2,10 @@ $.extend Alchemy,

# Opens an image in a dialog
# Used by the picture library
zoomImage: (url, title, width, height) ->
Alchemy.openDialog url,
size: "#{width}x#{height}"
title: title
padding: false
overflow: 'hidden'
ready: (dialog) ->
Alchemy.ImageLoader dialog,
color: '#000'
zoomImage: (url) ->
overlay = new Alchemy.ImageOverlay(url)
overlay.open()
return

# Trash window methods
TrashWindow:
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/alchemy/admin.scss
Expand Up @@ -18,6 +18,7 @@
@import "alchemy/form_fields";
@import "alchemy/frame";
@import "alchemy/icons";
@import "alchemy/image_library";
@import "alchemy/modules";
@import "alchemy/notices";
@import "alchemy/pagination";
Expand Down
57 changes: 0 additions & 57 deletions app/assets/stylesheets/alchemy/archive.scss
Expand Up @@ -14,23 +14,6 @@ div#image_assign_filter_and_image_sizing {
}
}

#zoomed_picture_background {
text-align: center;
height: 100%;

.spinner {
position: absolute !important;
left: 50% !important;
top: 50% !important;
}

.zoomed_picture {
max-width: 100%;
max-height: 100%;
margin-bottom: -4px;
}
}

.picture_thumbnail {
padding: $default-padding;
margin: 2px 1px 2px 2px;
Expand Down Expand Up @@ -178,26 +161,6 @@ div.assign_image_list_image {
}
}

&.edit {
top: auto;
right: 4px;
bottom: 24px;

a {
background: image-url('alchemy/icons.png') no-repeat -160px -167px;
}
}

&.info {
top: auto;
left: 4px;
bottom: 24px;

a {
background: image-url('alchemy/icons.png') no-repeat -64px -168px;
}
}

a {
display: block;
width: 16px;
Expand Down Expand Up @@ -338,26 +301,6 @@ div#filter_bar {
}
}

div#pictures_page_list {
max-height: 100px;
overflow: auto;

h3 { padding: 0 $default-padding }

ul {
@include form-value-display;
list-style-type: none;
}

li {
padding: 0 $default-padding;

&.even { background: #F7F7F7 }

&:last-child { margin-bottom: 0 }
}
}

#overlay_file_list {

&.with_tag_list {
Expand Down
34 changes: 25 additions & 9 deletions app/assets/stylesheets/alchemy/dialogs.scss
@@ -1,3 +1,4 @@
.alchemy-image-overlay-container,
.alchemy-dialog-container {
position: fixed;
overflow: auto;
Expand Down Expand Up @@ -26,6 +27,7 @@
}
}

.alchemy-image-overlay,
.alchemy-dialog-overlay {
position: fixed;
top: 0;
Expand All @@ -36,21 +38,28 @@
background-color: rgba(0, 0, 0, 0.0);
@include transition(background-color 200ms linear);

&.open {
background-color: rgba(0, 0, 0, 0.4);
}

&.closable {
cursor: pointer;
}
}

.alchemy-dialog {
.alchemy-dialog-overlay {

&.open {
background-color: rgba(0, 0, 0, 0.4);
}
}

.alchemy-dialog,
.alchemy-image-overlay-dialog {
position: relative;
max-width: 100%;
display: inline-block;
vertical-align: middle;
text-align: left;
}

.alchemy-dialog {
white-space: normal;
background-color: $light-gray;
margin: 2*$default-margin;
Expand Down Expand Up @@ -137,19 +146,26 @@
text-overflow: ellipsis;
}

.alchemy-image-overlay-close,
.alchemy-dialog-close {
position: absolute;
z-index: 1;
cursor: pointer;

.icon.close.small {
line-height: 1;
vertical-align: text-top;
}
}

.alchemy-dialog-close {
top: 0;
right: 2*$default-padding;
z-index: 1;
padding: 0 $default-padding;
color: inherit;
cursor: pointer;

.icon.close.small {
line-height: 1;
font-size: 16px;
vertical-align: text-top;
}
}

Expand Down
142 changes: 142 additions & 0 deletions app/assets/stylesheets/alchemy/image_library.scss
@@ -0,0 +1,142 @@
$image-overlay-form-width: 350px;

.alchemy-image-overlay {

&.open {
background-color: rgba(0, 0, 0, 0.6);
}
}

.alchemy-image-overlay-container,
.alchemy-image-overlay-dialog {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}

.alchemy-image-overlay-body {
width: 100%;
height: 100%;
}

.alchemy-image-overlay-close {
width: 32px;
height: 32px;
top: 2*$default-padding;
right: $image-overlay-form-width + 2*$default-padding;
cursor: pointer;

.icon.close.small {
font-size: 32px;
color: white;
}
}

.picture-details-overlay {
@include box-sizing(border-box);
position: absolute;
top: 0;
right: 0;
width: $image-overlay-form-width;
height: 100%;
background-color: $medium-gray;
padding: 2*$default-padding 4*$default-padding;
overflow: auto;
@include box-shadow(-2px 0 $default-padding -2px $text-color);

form .control-label,
.resource_info .value label {
width: 100%;
text-align: left;
float: none;
display: block;
padding: 0;
margin: $default-margin 0 0;
}

form .input .hint {
margin-left: 0;
}

form .input .select2-container,
form .input input[type="text"],
.resource_info .value p {
width: 100%;
}
}

#zoomed_picture_background {
@include box-sizing(border-box);
width: 100%;
height: 100%;
padding-top: 2*$default-padding;
padding-right: $image-overlay-form-width + 2*$default-padding;
padding-bottom: 2*$default-padding;
padding-left: 2*$default-padding;
margin: 0 auto;
text-align: center;
cursor: pointer;

&:before {
content: '';
vertical-align: middle;
display: inline-block;
height: 100%;
margin-left: -4px;
}

.spinner {
position: absolute !important;
left: 50% !important;
top: 50% !important;
@include transform(translateY(-50%));
margin-left: -$image-overlay-form-width/2;
}

img {
display: inline-block;
height: auto;
max-width: 100%;
max-height: 100%;
@include box-shadow(0 0 2*$default-margin $text-color);
background-color: $dark-gray;
vertical-align: middle;
cursor: default;
}
}

.picture-file-infos,
.picture-usage-info {
padding: 2*$default-padding 0;

.message {
@include box-sizing(border-box);
margin: 2*$default-padding 0;
}
}

#pictures_page_list {

h3 {
padding: $default-padding 0 0;
margin: 0;
}

ol {
padding-left: 0;
list-style-position: inside;
}

.list {
margin: 2*$default-margin 0;

li {
padding: 2*$default-padding;
@include border-radius($default-border-radius);
white-space: normal;

&.even { background: #F7F7F7 }
}
}
}

0 comments on commit 9cacf69

Please sign in to comment.