Permalink
Browse files

adding crop again button;

  • Loading branch information...
1 parent 0c24abb commit 2bd6efd90261949e9def65d77a540308e06954ff @fabiomcosta fabiomcosta committed Jul 31, 2011
View
44 myimgat/apps/wall/static/wall/css/crop-popin.css
@@ -40,35 +40,39 @@
margin-bottom: 16px;
}
-.crop-popin .crop .share-button {
- display: block;
- font-size: 26px;
- border-top: 2px solid #ab17a4;
- border-bottom: 2px solid #481c46;
- padding: 12px;
+.crop-popin .crop .btn1 {
+ color: #fff;
text-align: center;
- border-radius: 8px;
text-decoration: none;
- color: #fff;
text-shadow: 0 -1px #222;
-
+ border-top: 2px solid #ab17a4;
+ border-bottom: 2px solid #481c46;
background: #8f1c93;
background: -moz-linear-gradient(top, #8f1c93 0%, #541051 100%);
background: -webkit-linear-gradient(top, #8f1c93 0%,#541051 100%);
background: -o-linear-gradient(top, #8f1c93 0%,#541051 100%);
background: -ms-linear-gradient(top, #8f1c93 0%,#541051 100%);
background: linear-gradient(top, #8f1c93 0%,#541051 100%);
+ border-radius: 4px;
+ padding: 5px 10px;
}
-.crop-popin .crop .share-button:hover {
+.crop-popin .crop .btn1:hover {
background: #8f1c93;
}
-.crop-popin .crop .share-button:active {
+.crop-popin .crop .btn1:active {
border-top: 2px solid #481c46;
border-bottom: 2px solid #ab17a4;
}
+.crop-popin .crop .share-button {
+ display: block;
+ font-size: 26px;
+ border-radius: 8px;
+ padding: 12px;
+}
+
.crop-popin .crop .share-details {
visibility: hidden;
padding-top: 12px;
@@ -81,7 +85,7 @@
border-radius: 4px;
}
-.markup {
+.crop-popin .markup {
font-family: courier;
font-size: 13px;
background-color: #333;
@@ -91,19 +95,25 @@
padding: 10px;
}
-.socials {
+.crop-popin .socials {
overflow: hidden;
+ padding: 3px 0;
}
-.social-item {
+.crop-popin .social-item {
margin-right: 12px;
float: left;
}
-.social-item.twitter {
+.crop-popin .social-item.twitter {
padding-top: 2px;
}
-#___plusone_0 {
- width: 38px !important;
+.crop-popin .back {
+ overflow: hidden;
+ padding-top: 8px;
+}
+
+.crop-popin .crop-again {
+ float: left;
}
View
10 myimgat/apps/wall/static/wall/js/crop-popin.js
@@ -27,10 +27,12 @@
this.socials = this.element.getElement('div.socials');
this.cropContainer = this.element.getElement('div.crop-image-container');
this.preview = this.element.getElement('div.preview');
+ this.cropAgainButton = this.element.getElement('a.crop-again');
},
bindEvents: function() {
this.shareButton.addEvent('click', this.share.bind(this));
+ this.cropAgainButton.addEvent('click', this.cropAgain.bind(this));
},
share: function(e) {
@@ -42,7 +44,9 @@
this.request.addEvent('success', function(url) {
var shareUrl = 'http://myimg.at/shared_photo/' + self.image.id;
new Element('img', {src: url}).inject(self.preview.empty());
+
self.cropContainer.morph({height: 0});
+
self.croppedLink.set('href', url);
self.croppedLink.set('text', self.image.title);
self.embedURL.set('text', url);
@@ -61,6 +65,12 @@
}).post(data);
},
+ cropAgain: function() {
+ this.cropContainer.setStyle('height', 'auto');
+ this.preview.empty();
+ this.shareArea.fade('hide');
+ },
+
show: function(tab) {
this.fireEvent('show');
if (tab) {
View
7 myimgat/apps/wall/templates/wall/popin.html
@@ -14,17 +14,18 @@
<h2>image title</h2>
<div class="crop-image-container">
<div class="photo"></div>
- <a class="share-button" href="#">share photo</a>
+ <a class="btn1 share-button" href="#">share photo</a>
</div>
<div class="preview"></div>
<div class="share-details">
<h3>Share this url: <a href="#" target="_blank" class="url"></a></h3>
<h3>Embed:</h3>
<p class="markup">&lt;a href=&quot;<span class="comment-page"></span>&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;img <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;<span class="url"></span>&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alt=&quot;<span class="title"></span>&quot; /&gt;<br />&lt;/a&gt;</p>
<div class="socials"></div>
+ <div class="back">
+ <a class="btn1 crop-again" href="#">crop again</a>
+ </div>
</div>
{% csrf_token %}
</div>
- <div class="share">
- </div>
</div>

0 comments on commit 2bd6efd

Please sign in to comment.