Skip to content

Commit

Permalink
Updated design for crop as per the design draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@pulkit110
pulkit110 committed Jun 25, 2011
1 parent b4b6ecd commit c54cabc
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 33 deletions.
64 changes: 59 additions & 5 deletions css/ImageEditor.css
View file
Expand Up @@ -29,7 +29,13 @@

.fl-image-editor-buttons {
margin-top: 1em;
text-align:right;
}

/* General Menu */
.fl-image-editor-menu {
opacity: 0.7;
color: #ffffff;
margin-left: 10px;
}

/* General Buttons */
Expand All @@ -45,15 +51,15 @@
outline: none;
cursor: pointer;
width: 8.4em;
background-color: #696969;
border-color: #006838;
}

.fl-image-editor-buttons button:focus {
outline: 2px solid #142B8C;
}

.fl-image-editor-buttons .fl-image-editor-button-resize {
background-color: #74B74A;
border-color: #006838;
}

.fl-image-editor-buttons .fl-image-editor-button-resize:hover {
Expand All @@ -62,8 +68,6 @@
}

.fl-image-editor-buttons .fl-image-editor-button-crop {
background-color: #74B74A;
border-color: #006838;
}

.fl-image-editor-buttons .fl-image-editor-button-crop:hover {
Expand All @@ -78,3 +82,53 @@
cursor: auto;
}

.flc-image-canvas {
margin-top: 1em;
text-align: center;
margin: 1em auto;
}

.flc-image-canvas-div {
width: 750px;
height: 750px;
line-height: 750px;
vertical-align : middle;
text-align: center;
margin: 1em auto;
}

.fl-image-editor-options {
background-color: #696969;
}

.fl-image-editor-crop-options {
text-indent: 5px;
}

.fl-image-editor-resize-options {
}

.fl-image-editor-tag-options {
}

.fl-image-editor-button-crop-confirm {
background-image: url(../images/tick.png);
cursor: pointer;
border: 1px solid transparent;
height: 20px;
width: 20px;
overflow: hidden;
background-color: transparent;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 1px 1px;
padding: 0;
margin: 0;
}

.fl-image-editor-button-crop-confirm:hover, tr:focus {
border: 1px solid #CCC;
background-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
}
45 changes: 36 additions & 9 deletions html/ImageEditorDemo.html
View file
Expand Up @@ -8,7 +8,11 @@
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />

<link rel="stylesheet" type="text/css" href="../../inlineEdit/css/InlineEdit.css" />

<link rel="stylesheet" type="text/css" href="../../uploader/css/Uploader.css" />

<link rel="stylesheet" type="text/css" href="../css/ImageEditor.css" />
<link rel="stylesheet" type="text/css" href="../css/ImageEditorDemo.css" />

Expand All @@ -28,6 +32,9 @@
<script type="text/javascript" src="../../../framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../../../framework/enhancement/js/ProgressiveEnhancement.js"></script>

<!-- Inline Edits Dependencies -->
<script type="text/javascript" src="../../inlineEdit/js/InlineEdit.js"></script>

<!-- Uploader dependencies -->
<script type="text/javascript" src="../../uploader/js/Uploader.js"></script>
<script type="text/javascript" src="../../uploader/js/FileQueue.js"></script>
Expand All @@ -52,16 +59,39 @@

</head>

<body>
<div id="uploader-contents"></div>
<body>
<!-- <div id="image-space"><canvas class="flc-image-canvas fl-image-canvas"></canvas></div> -->
<div id="image-space">
<canvas class="flc-image-canvas" width=750px height=750px></canvas>

<div class="fl-image-editor-menu">
<div class="fl-image-editor-buttons">
<button type="button" class="flc-image-editor-button-crop fl-image-editor-button-crop">Crop</button>
<button type="button" class="flc-image-editor-button-resize fl-image-editor-button-resize">Resize</button>
<button type="button" class="flc-image-editor-button-tag fl-image-editor-button-crop">Tag</button>
</div>
<div class="fl-image-editor-options fl-image-editor-crop-options">
<b>CROP IMAGE</b> <br>
&nbsp;&nbsp;use arrow keys or input location: <span class="flc-inlineEditable"><span class="flc-inlineEdit-text fl-image-editor-crop-location"></span></span> <br>
&nbsp;&nbsp;width: <span class="flc-inlineEditable"><span class="flc-inlineEdit-text fl-image-editor-crop-width"></span></span>
height: <span class="flc-inlineEditable"><span class="flc-inlineEdit-text fl-image-editor-crop-height"></span></span>
<button class="fl-image-editor-button-crop-confirm"></button> <br>
</div>
<div class="fl-image-editor-options fl-image-editor-resize-options">
RESIZE
</div>
<div class="fl-image-editor-options fl-image-editor-tag-options">
TAG
</div>
</div>

<div class="flc-image-canvas-div">
<canvas class="flc-image-canvas" width=750px height=750px></canvas>
</div>

<div class="fl-image-editor-show-annotation">
</div>

<div class="fl-image-editor-resize-options">
<div class="fl-image-editor-resize-options-old">
<label>
<input type="radio" name="flc-image-editor-resize-radios" class="flc-image-editor-resize-radio-custom" value="radio"/>
Custom width x height
Expand All @@ -80,12 +110,9 @@

</div>

<div class="fl-image-editor-buttons">
<button type="button" class="flc-image-editor-button-resize fl-image-editor-button-resize">Resize</button>
<button type="button" class="flc-image-editor-button-crop fl-image-editor-button-crop">Crop</button>
<button type="button" class="flc-image-editor-button-tag fl-image-editor-button-crop">Tag</button>
</div>

</div>
<div id="uploader-contents"></div>
<div id="server-error"></div>


Expand Down
Binary file added images/tick.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 36 additions & 18 deletions js/ImageEditor.js
View file
Expand Up @@ -77,23 +77,24 @@ var fluid_1_4 = fluid_1_4 || {};
};

var setupCrop = function (that) {
if (that.cropStarted) {
that.cropStarted = false;
enableElement(that, that.resizeButton);
enableElement(that, that.tagButton);
var croppingReturnValues = that.cropper.reset();
var croppedImageDataURL = croppingReturnValues[0];
that.croppingDimensions = croppingReturnValues[1];

that.setImage(croppedImageDataURL, TYPE_CROP);

} else {
disableElement(that, that.resizeButton);
disableElement(that, that.tagButton);
that.cropStarted = true;
that.cropper.init(that.imageCanvas.get()[0], that.resizeFactor, that.image, that.imageX, that.imageY);
}
showElement(that, that.locate("cropOptions"));

disableElement(that, that.resizeButton);
disableElement(that, that.tagButton);
that.cropStarted = true;
that.cropper.init(that.imageCanvas.get()[0], that.resizeFactor, that.image, that.imageX, that.imageY);
};

var confirmCrop = function (that) {
hideElement(that, that.locate("cropOptions"));

that.cropStarted = false;
enableElement(that, that.resizeButton);
enableElement(that, that.tagButton);
var croppingReturnValues = that.cropper.reset();
var croppedImageDataURL = croppingReturnValues[0];
that.croppingDimensions = croppingReturnValues[1];
that.setImage(croppedImageDataURL, TYPE_CROP);
};

var setupTag = function (that) {
Expand Down Expand Up @@ -193,6 +194,11 @@ var fluid_1_4 = fluid_1_4 || {};
that.locate("resizeButton").click(function () {
setupResize(that);
});

that.locate("cropConfirm").click(function () {
confirmCrop(that);
});

that.resizeRadioCustom.change(function () {
that.resizeRadioCustomFlag = true;
that.resizeRadioPercFlag = false;
Expand Down Expand Up @@ -226,7 +232,7 @@ var fluid_1_4 = fluid_1_4 || {};
that.percSpinner = that.locate("percSpinner");
that.resizeRadioCustom = that.locate("resizeRadioCustom");
that.resizeRadioPerc = that.locate("resizeRadioPerc");
that.resizeOptions = that.locate("resizeOptions");
that.resizeOptions = that.locate("resizeOptionsOld");

that.cropStarted = false;
that.tagStarted = false;
Expand All @@ -242,6 +248,9 @@ var fluid_1_4 = fluid_1_4 || {};
disableElement(that, that.resizeButton);

hideElement(that, that.resizeOptions);
hideElement(that, that.locate("cropOptions"));
hideElement(that, that.locate("resizeOptions"));
hideElement(that, that.locate("tagOptions"));

bindDOMEvents(that);

Expand Down Expand Up @@ -325,12 +334,21 @@ var fluid_1_4 = fluid_1_4 || {};
resizeButton: ".flc-image-editor-button-resize", //required, Resize Button
cropButton: ".flc-image-editor-button-crop", //required, Crop Button
tagButton: ".flc-image-editor-button-tag", //required, Tag Button
cropOptions: ".fl-image-editor-crop-options", //required, Crop Options
resizeOptions: ".fl-image-editor-resize-options", //required, Resize Options
tagOptions: ".fl-image-editor-tag-options", //required, Tag Options
cropConfirm: ".fl-image-editor-button-crop-confirm", //required, Crop Confirm Button
resizeConfirm: ".fl-image-editor-button-resize-confirm", //required, Resize Confirm Button
tagConfirm: ".fl-image-editor-button-tag-confirm", //required, Tag Confirm Button
cropLocation: ".fl-image-editor-crop-location", //Crop Location
cropWidth: ".fl-image-editor-crop-width", //Crop Width
cropHeight: ".fl-image-editor-crop-height", //Crop Height
widthSpinner: ".flc-image-editor-resize-spinner-width", //required, Resize width spinner
heightSpinner: ".flc-image-editor-resize-spinner-height", //required, Resize height spinner
percSpinner: ".flc-image-editor-resize-spinner-percentage", //required, Resize height spinner
resizeRadioCustom: ".flc-image-editor-resize-radio-custom", //required, Resize Custom radio button
resizeRadioPerc: ".flc-image-editor-resize-radio-percentage", //required, Resize Percentage radio button
resizeOptions: ".fl-image-editor-resize-options", //resize options div
resizeOptionsOld: ".fl-image-editor-resize-options-old", //resize options div
showAnnotation: ".fl-image-editor-show-annotation",
showAnnotationsLink: ".flc-image-editor-show-annotations-link"
},
Expand Down
7 changes: 6 additions & 1 deletion js/ImageEditorDemo.js
View file
Expand Up @@ -40,5 +40,10 @@ jQuery(document).ready(function () {
}
}
});
});
});

fluid.inlineEdits(".fl-image-editor-menu");

fluid.inlineEdits("#catalog-table");

});

0 comments on commit c54cabc

Please sign in to comment.