Merge pull request ezsystems#138 from ezsystems/ezp-23748_image_edit_…

…view EZP-23748: As an editor, I want to be able to fill the image field
ezpublishlegacy · Dec 17, 2014 · ee01928 · ee01928
2 parents 40d936a + d2bfa0e
commit ee01928
Show file tree

Hide file tree

Showing 24 changed files with 2,560 additions and 91 deletions.
diff --git a/Resources/config/css.yml b/Resources/config/css.yml
@@ -42,6 +42,7 @@ system:
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/integer.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/maplocation.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/author.css'
+                - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/image.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/selection.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/time.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/date.css'
@@ -82,6 +83,7 @@ system:
                 - '@eZPlatformUIBundle/Resources/public/css/theme/views/fields/edit/maplocation.css'
                 - '@eZPlatformUIBundle/Resources/public/css/theme/views/fields/edit/author.css'
                 - '@eZPlatformUIBundle/Resources/public/css/theme/views/fields/edit/selection.css'
+                - '@eZPlatformUIBundle/Resources/public/css/theme/views/fields/edit/image.css'
                 - '@eZPlatformUIBundle/Resources/public/css/theme/modules/tabs.css'
                 - '@eZPlatformUIBundle/Resources/public/css/theme/modules/page-header.css'
                 - '@eZPlatformUIBundle/Resources/public/css/theme/modules/serverside-content.css'

diff --git a/Resources/config/image_variations.yml b/Resources/config/image_variations.yml
@@ -5,3 +5,7 @@ system:
                 reference: reference
                 filters: 
                     - {name: geometry/scaleheightdownonly, params: [250]}
+            platformui_editview:
+                reference: reference
+                filters:
+                    - {name: geometry/scalewidthdownonly, params: [300]}
diff --git a/Resources/config/yui.yml b/Resources/config/yui.yml
@@ -149,6 +149,7 @@ system:
                         - 'ez-textline-editview'
                         - 'ez-textblock-editview'
                         - 'ez-xmltext-editview'
+                        - 'ez-image-editview'
                         - 'ez-emailaddress-editview'
                         - 'ez-maplocation-editview'
                         - 'ez-url-editview'
@@ -247,6 +248,12 @@ system:
                 xmltexteditview-ez-template:
                     type: 'template'
                     path: %ez_platformui.public_dir%/templates/fields/edit/xmltext.hbt
+                ez-image-editview:
+                    requires: ['ez-fieldeditview', 'imageeditview-ez-template', 'ez-asynchronousview', 'event-tap']
+                    path: %ez_platformui.public_dir%/js/views/fields/ez-image-editview.js
+                imageeditview-ez-template:
+                    type: 'template'
+                    path: %ez_platformui.public_dir%/templates/fields/edit/image.hbt
                 ez-emailaddress-editview:
                     requires: ['ez-fieldeditview', 'event-valuechange', 'emailaddresseditview-ez-template']
                     path: %ez_platformui.public_dir%/js/views/fields/ez-emailaddress-editview.js

diff --git a/Resources/public/css/modules/button.css b/Resources/public/css/modules/button.css
@@ -7,6 +7,19 @@
     padding: 0.4em 0.5em;
 }
 
+.ez-button-height:before {
+    display: block;
+    font-size: 200%;
+    text-align: center;
+    margin-bottom: 0.2em;
+}
+
+.ez-button-height {
+    text-align: center;
+    width: 14em;
+    white-space: normal;
+}
+
 .ez-button[data-icon]:before {
     padding-right: 0.5em;
 }
diff --git a/Resources/public/css/theme/modules/button.css b/Resources/public/css/theme/modules/button.css
@@ -25,3 +25,8 @@
     content: "\E615";
     padding-right: 0.5em;
 }
+
+.ez-button-upload:before {
+    content: "\E61f";
+    padding-right: 0.5em;
+}
diff --git a/Resources/public/css/theme/views/fields/edit/image.css b/Resources/public/css/theme/views/fields/edit/image.css
@@ -0,0 +1,160 @@
+@-webkit-keyframes ez-image-expand {
+    0% {
+        -webkit-transform: scaleY(0);
+    }
+    100% {
+        -webkit-transform: scaleY(1);
+    }
+}
+
+@-webkit-keyframes ez-image-collpase {
+    0% {
+        -webkit-transform: scaleY(1);
+        max-height: 100%;
+    }
+    100% {
+        -webkit-transform: scaleY(0);
+        max-height: 0;
+    }
+}
+
+@keyframes ez-image-expand {
+    0% {
+        transform: scaleY(0);
+    }
+    100% {
+        transform: scaleY(1);
+    }
+}
+
+@keyframes ez-image-collpase {
+    0% {
+        transform: scaleY(1);
+        max-height: 100%;
+    }
+    100% {
+        transform: scaleY(0);
+        max-height: 0;
+    }
+}
+
+.ez-view-imageeditview .ez-image-editpreview {
+    -webkit-transform-origin: center top;
+            transform-origin: center top;
+    -webkit-animation: ez-image-expand 0.2s ease forwards;
+            animation: ez-image-expand 0.2s ease forwards;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-editpreview {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-animation: ez-image-collpase 0.2s ease forwards;
+            animation: ez-image-collpase 0.2s ease forwards;
+}
+
+.ez-view-imageeditview.is-image-being-updated .ez-image-preview {
+    opacity: 0.1;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+}
+
+.ez-view-imageeditview .ez-image-preview {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: left top;
+            transform-origin: left top;
+    -webkit-transition: all 0.1s ease;
+            transition: all 0.1s ease;
+}
+
+.ez-view-imageeditview.is-image-loading .ez-asynchronousview-loading,
+.ez-view-imageeditview.is-image-loading .ez-asynchronousview-error {
+    font-size: 120%;
+}
+
+.ez-view-imageeditview .ez-image-empty {
+    color: #888;
+    font-style: italic;
+    -webkit-transition: all 0.2s ease;
+            transition: all 0.2s ease;
+}
+
+.ez-view-imageeditview.is-error .ez-image-empty {
+    color: #BF3E33;
+}
+
+.ez-view-imageeditview .ez-image-view-original {
+    font-size: 80%;
+}
+
+.ez-view-imageeditview .ez-image-view-original:after {
+    font-family: 'ez-platformui-icomoon';
+    content: "\E610";
+    padding-left: 0.3em;
+}
+
+.ez-view-imageeditview .ez-image-properties-title {
+    font-size: 120%;
+    border-bottom: 1px solid #ccc;
+}
+
+.ez-view-imageeditview .ez-image-properties-original {
+    list-style-type: square;
+}
+
+.ez-view-imageeditview .ez-image-remove-option {
+    opacity: 1;
+    -webkit-transition: all 0.2s ease;
+            transition: all 0.2s ease;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-remove-option {
+    opacity: 0.4;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-button-delete[disabled] {
+    opacity: 1;
+}
+
+.ez-view-imageeditview .ez-image-warning {
+    border-radius: 3px;
+    background: #222;
+    opacity: 0.85;
+    color: #fff;
+    display: block;
+    padding: 0;
+
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    -webkit-transform-origin: center bottom;
+            transform-origin: center bottom;
+    -webkit-transition: all 0.2s ease;
+            transition: all 0.2s ease;
+}
+
+.ez-view-imageeditview.has-warning .ez-image-warning {
+    padding: 0.8em;
+
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+
+.ez-view-imageeditview .ez-image-warning-hide {
+    font-size: 90%;
+}
+
+.ez-view-imageeditview .ez-image-warning-hide:after {
+    content: "\E600";
+    color: #fff;
+    display: inline-block;
+}
+
+.ez-view-imageeditview .ez-image-warning-text:before {
+    content: "\E617";
+    font-size: 300%;
+    padding-right: 0.3em;
+    color: #fff;
+    display: block;
+    float: left;
+}
diff --git a/Resources/public/css/views/fields/edit/image.css b/Resources/public/css/views/fields/edit/image.css
@@ -0,0 +1,159 @@
+.ez-view-imageeditview .ez-image-input-ui {
+    width: 100%;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-editpreview {
+   display: none;
+}
+
+.ez-view-imageeditview .ez-image-empty {
+    display: none;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-empty {
+    display: block;
+}
+
+.ez-view-imageeditview .ez-image-upload-new {
+    display: none;
+}
+
+.ez-view-imageeditview .ez-image-upload-replace {
+    display: inline;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-upload-new {
+    display: inline;
+}
+
+.ez-view-imageeditview.is-image-empty .ez-image-upload-replace {
+    display: none;
+}
+
+.ez-view-imageeditview .ez-asynchronousview-loading {
+    display: none;
+}
+
+.ez-view-imageeditview.is-image-loading .ez-image-preview {
+    display: none;
+}
+
+.ez-view-imageeditview.is-image-loading .ez-asynchronousview-loading {
+    display: block;
+}
+
+.ez-view-imageeditview .ez-asynchronousview-error {
+    display: none;
+}
+
+.ez-view-imageeditview.has-loading-error .ez-asynchronousview-loading {
+    display: none;
+}
+
+.ez-view-imageeditview.has-loading-error .ez-asynchronousview-error {
+    display: block;
+}
+
+.ez-view-imageeditview .ez-asynchronousview-retry {
+    display: block;
+    margin: 0.5em auto;
+}
+
+.ez-view-imageeditview .ez-image-empty {
+    margin: 0.5em 0 0 0.5em;
+}
+
+.ez-view-imageeditview .ez-asynchronousview-loading,
+.ez-view-imageeditview .ez-asynchronousview-error {
+    margin: 1em 0;
+}
+
+.ez-view-imageeditview .ez-image-editpreview {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+            flex-direction: row;
+}
+
+.ez-view-imageeditview .ez-image-preview {
+    height: auto;
+    max-width: 100%;
+    display: block;
+}
+
+.ez-view-imageeditview .ez-image-editpreview-image {
+    max-width: 300px;
+}
+
+.ez-view-imageeditview .ez-image-properties {
+    margin-left: 1em;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+}
+
+.ez-view-imageeditview .ez-image-properties-title {
+    margin-top: 0;
+    padding: 0.3em 0.3em 0.3em 0;
+}
+
+.ez-view-imageeditview .ez-image-properties-original {
+    margin: 0 0 0 1.2em;
+    padding: 0;
+    line-height: 1.4em;
+}
+
+.ez-view-imageeditview .ez-image-alt-text {
+    margin-top: 1.5em;
+}
+
+.ez-view-imageeditview .ez-image-alt-text-label {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
+.ez-view-imageeditview .ez-image-alt-text-input {
+    width: 100%;
+}
+
+.ez-view-imageeditview .ez-image-remove {
+    margin: 0.5em 0 0 0;
+}
+
+.ez-view-imageeditview .ez-image-action {
+    text-align: center;
+    position: relative;
+}
+
+.ez-view-imageeditview .ez-image-input-file {
+    display: none;
+}
+
+.ez-view-imageeditview .ez-image-action .ez-button {
+    margin: 1em;
+}
+
+.ez-view-imageeditview .ez-image-warning {
+    display: none;
+    text-align: left;
+    position: absolute;
+    bottom: 100%;
+    left: 10%;
+    width: 80%;
+    padding: 0.8em;
+}
+
+.ez-view-imageeditview.has-warning .ez-image-warning {
+    display: block;
+ }
+
+.ez-view-imageeditview .ez-image-warning-hide {
+    float: right;
+    display: block;
+}
+
+.ez-view-imageeditview .ez-image-warning-text {
+    margin: 0;
+}
diff --git a/Resources/public/fonts/icomoon.eot b/Resources/public/fonts/icomoon.eot