Changed location share representation to be more like the file

attachment. Init UI. Probably a little buggy.

5 files changed, 59 insertions, 20 deletions

diff --git a/js/util.js b/js/util.js
index dd7a74a7a..8ee0dd05d 100644
--- a/js/util.js
+++ b/js/util.js
@@ -52,7 +52,9 @@ var SN = { // StatusNet
             NoticeLocationId: 'notice_data-location_id',
             NoticeLocationNs: 'notice_data-location_ns',
             NoticeLocationName: 'notice_data-location_name',
-            NoticeLocationCookieName: 'location_enabled'
+            NoticeLocationCookieName: 'location_enabled',
+            NoticeDataGeo: 'notice_data-geo',
+            NoticeDataGeoSelected: 'notice_data-geo_selected'
         }
     },
 
@@ -438,29 +440,46 @@ var SN = { // StatusNet
         },
 
         NoticeLocationAttach: function() {
-            if ($('#notice_data-location_enabled').length > 0) {
+            var NDG = $('#'+SN.C.S.NoticeDataGeo);
+            if (NDG.length > 0) {
+                NDG.attr('title', NDG.text());
                 var NLE = $('#notice_data-location_wrap');
                 var geocodeURL = NLE.attr('title');
 
-                NLE.insertAfter('#'+SN.C.S.FormNotice+' fieldset');
+                var S = '<div id="'+SN.C.S.NoticeDataGeoSelected+'" class="'+SN.C.S.Success+'"><button class="close">&#215;</button></div>';
+                var NDGS = $('#'+SN.C.S.NoticeDataGeoSelected);
+
+                if (NDGS.length > 0) {
+                    NDGS.replaceWith(S);
+                }
+                else {
+                    $('#'+SN.C.S.FormNotice).append(S);
+                }
+                NDGS = $('#'+SN.C.S.NoticeDataGeoSelected);
+
+                $('#'+SN.C.S.NoticeDataGeoSelected+' button.close').click(function(){
+                    $('#'+SN.C.S.NoticeDataGeoSelected).remove();
+                    $('#'+SN.C.S.NoticeDataGeo).attr('checked', false);
+                });
 
                 if (navigator.geolocation) {
                     NLE.change(function() {
                         NLE.removeAttr('title');
 
-                        $.cookie(SN.C.S.NoticeLocationCookieName, $('#notice_data-location_enabled').attr('checked'));
+                        $.cookie(SN.C.S.NoticeLocationCookieName, $('#'+SN.C.S.NoticeDataGeo).attr('checked'));
 
                         var NLN = $('#'+SN.C.S.NoticeLocationName);
                         if (NLN.length > 0) {
                             NLN.remove();
                         }
 
-                        NLE.prepend('<span id="'+SN.C.S.NoticeLocationName+'">Geo</span>');
+                        NDGS.prepend('<span id="'+SN.C.S.NoticeLocationName+'">Geo</span>');
                         NLN = $('#'+SN.C.S.NoticeLocationName);
 
-                        if ($('#notice_data-location_enabled').attr('checked') === true) {
-                            NLN.show();
+                        if ($('#'+SN.C.S.NoticeDataGeo).attr('checked') === true) {
+                            NDGS.show();
                             NLN.addClass('processing');
+                            $('label[for=notice_data-geo]').addClass('checked');
 
                             navigator.geolocation.getCurrentPosition(function(position) {
                                 $('#'+SN.C.S.NoticeLat).val(position.coords.latitude);
@@ -497,7 +516,8 @@ var SN = { // StatusNet
                             });
                         }
                         else {
-                            NLN.hide();
+                            $('label[for=notice_data-geo]').removeClass('checked');
+                            NDGS.hide();
                             $('#'+SN.C.S.NoticeLat).val('');
                             $('#'+SN.C.S.NoticeLon).val('');
                             $('#'+SN.C.S.NoticeLocationNs).val('');
@@ -506,7 +526,7 @@ var SN = { // StatusNet
                     });
 
                     var cookieVal = $.cookie(SN.C.S.NoticeLocationCookieName);
-                    $('#notice_data-location_enabled').attr('checked', (cookieVal == null || cookieVal == 'true'));
+                    $('#'+SN.C.S.NoticeDataGeo).attr('checked', (cookieVal == null || cookieVal == 'true'));
                     NLE.change();
                 }
             }
diff --git a/lib/noticeform.php b/lib/noticeform.php
index d35655a0b..99865645a 100644
--- a/lib/noticeform.php
+++ b/lib/noticeform.php
@@ -208,9 +208,8 @@ class NoticeForm extends Form
                 $this->out->hidden('notice_data-location_ns', empty($this->location_ns) ? (empty($this->profile->location_ns) ? null : $this->profile->location_ns) : $this->location_ns, 'location_ns');
 
                 $this->out->elementStart('div', array('id' => 'notice_data-location_wrap',
-                                                      'class' => 'success',
                                                       'title' => common_local_url('geocode')));
-                $this->out->checkbox('notice_data-location_enabled', _('Share your location'), true);
+                $this->out->checkbox('notice_data-geo', _('Share your location'), true);
                 $this->out->elementEnd('div');
             }
 
diff --git a/theme/base/css/display.css b/theme/base/css/display.css
index a0b12a9f4..fc8762cdc 100644
--- a/theme/base/css/display.css
+++ b/theme/base/css/display.css
@@ -554,31 +554,44 @@ width:81.5%;
 margin-bottom:0;
 line-height:1.618;
 }
-.form_notice #notice_data-attach_selected code {
+.form_notice #notice_data-attach_selected code,
+.form_notice #notice_data-location_name {
 float:left;
-width:90%;
+width:87%;
 display:block;
-font-size:1.1em;
 line-height:1.8;
 overflow:auto;
 }
-.form_notice #notice_data-attach_selected button {
+.form_notice #notice_data-attach_selected code {
+font-size:1.1em;
+}
+.form_notice #notice_data-attach_selected button.close,
+.form_notice #notice_data-geo_selected button.close {
 float:right;
 font-size:0.8em;
 }
+
+.form_notice #notice_data-location_wrap label {
+position:absolute;
+top:25px;
+right:4px;
+left:auto;
+cursor:pointer;
+width:16px;
+height:16px;
+display:block;
+}
 .form_notice #notice_data-location_wrap input {
-margin-right:7px;
-float:left;
-top:3px;
+display:none;
 }
 .form_notice #notice_data-location_wrap label {
 font-weight:normal;
 font-size:1em;
 margin-bottom:0;
+text-indent:-9999px;
 }
 .form_notice #notice_data-location_name {
 display:block;
-line-height:1.6;
 padding-left:21px;
 }
 
diff --git a/theme/base/images/icons/icons-01.gif b/theme/base/images/icons/icons-01.gif
index cda932161..03db8c09c 100644
--- a/theme/base/images/icons/icons-01.gif
+++ b/theme/base/images/icons/icons-01.gif
diff --git a/theme/identica/css/display.css b/theme/identica/css/display.css
index 34be6eefa..a47837387 100644
--- a/theme/identica/css/display.css
+++ b/theme/identica/css/display.css
@@ -117,6 +117,12 @@ background-position:0 47%;
 .form_notice a#notice_data-location_name {
 background-position:0 -1711px;
 }
+.form_notice label[for=notice_data-geo] {
+background-position:0 -1780px;
+}
+.form_notice label[for=notice_data-geo].checked {
+background-position:0 -1847px;
+}
 
 a,
 .form_settings input.form_action-primary,
@@ -185,7 +191,8 @@ button.close,
 .entity_silence input.submit,
 .entity_delete input.submit,
 .notice-options .repeated,
-.form_notice a#notice_data-location_name {
+.form_notice a#notice_data-location_name,
+.form_notice label[for=notice_data-geo] {
 background-image:url(../../base/images/icons/icons-01.gif);
 background-repeat:no-repeat;
 background-color:transparent;