nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MS DG; checkboxes are togglable, with tested css magick

Browse source
This commit is contained in:
Dennis Collinson 2012-04-19 14:05:40 -07:00
parent fe7de0544d
commit f7d320b622
3 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/assets/stylesheets/new_styles/_base.scss
View file

@ -379,9 +379,9 @@ div[data-template=flow] {
.service-selector {
float: left;
margin-left: 100px;
}
.dropdown-menu {
bottom : 0;
top: auto;
@ -406,3 +406,18 @@ div[data-template=flow] {
}
}
// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
// if you change this, check toggling the new publisher service broadcasts is still sensible
// the checkbox should be hidden, and in the off state the service icons should be lighter
// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
.services {
label { display : inline;}
input:not(:checked) + label {
@include opacity(0.4);
}
input {
display : none;
}
}

5
app/assets/templates/services-selector.jst.hbs
View file

@ -1,8 +1,9 @@
<span class="service-selector-title">Broadcast:</span>
<div class="services">
<!--*CSS MAGIC* CHECKBOX IS HIDDEN AND IS CHECKED BY CLICKING THE LABEL, CHANGE THIS AT YOUR OWN PERIL, RUN JASMINE AFTER-->
{{#each current_user.services}}
<img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-16x16.png" />
<input type="checkbox" name="services" class="service" value="{{provider}}" />
<input id="service_toggle_{{provider}}" type="checkbox" name="services" class="service" value="{{provider}}" />
<label for="service_toggle_{{provider}}"><img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-16x16.png" data-provider="{{provider}}" /></label>
{{/each}}
</div>

13
spec/javascripts/app/views/services_selector_view_spec.js
View file

@ -2,7 +2,7 @@ describe("app.views.ServicesSelector", function(){
beforeEach(function(){
loginAs({
services : [
{ provider : "fakeBook" }
{ provider : "facebook" }
]
});
@ -11,12 +11,21 @@ describe("app.views.ServicesSelector", function(){
describe("rendering", function(){
beforeEach(function(){
this.view.setElement("#jasmine_content")
this.view.render();
});
it("displays all services", function(){
var checkboxes = $(this.view.el).find('input[type="checkbox"]');
expect(checkboxes.val()).toBe("fakeBook");
expect(checkboxes.val()).toBe("facebook");
});
// this tests the crazy css we have in a bassackwards way
// check out toggling the services on the new publisher and make sure it works if you change stuff.
it("selects the checkbox when the image is clicked", function(){
expect($("label[for=service_toggle_facebook]").css("opacity")).toBeLessThan(0.8) //floating point weirdness, be safe.
this.view.$("input[value='facebook']").select()
expect($("label[for=service_toggle_facebook]").css("opacity")).toBe('1')
})
});
});