Merge pull request #747 from euphorie/logo-widget

Improve the widget for the sector logo

docs/changes.rst

@@ -11,6 +11,9 @@ Changelog
 - Use a rich term for vocabulary items in the survey group forms
   [ale-rt]
 
+- Improve the widget for the sector logo
+  [ale-rt]
+
 - CSV download of similar title details.
   Ref: scrum-2198
 

src/euphorie/content/sector.py

@@ -67,6 +67,9 @@ class ISector(model.Schema, IUser, IBasic):
 
     directives.order_after(contact_email="contact_name")
 
+    directives.widget(
+        logo="euphorie.content.widgets.logo.LogoFieldWidget",
+    )
     logo = filefield.NamedBlobImage(
         title=_("label_logo", default="Logo"),
         description=_(

src/euphorie/content/widgets/configure.zcml

@@ -21,6 +21,13 @@
 
   </configure>
 
+  <z3c:widgetTemplate
+      widget=".logo.LogoWidget"
+      template="templates/logo.pt"
+      layer="plonetheme.nuplone.z3cform.interfaces.INuPloneFormLayer"
+      mode="input"
+      />
+
   <adapter factory=".password.PasswordWithConfirmationValidator" />
   <adapter factory=".survey_source_selection.SurveySourceSelectionFieldWidget" />
 

src/euphorie/content/widgets/logo.py

@@ -0,0 +1,10 @@
+from plone.formwidget.namedfile.widget import NamedImageWidget
+from z3c.form.widget import FieldWidget
+
+
+class LogoWidget(NamedImageWidget):
+    pass
+
+
+def LogoFieldWidget(field, request):
+    return FieldWidget(field, LogoWidget(request))

src/euphorie/content/widgets/templates/logo.pt

@@ -0,0 +1,63 @@
+<fieldset class="concise">
+  <p class="legend"
+     i18n:translate="label_logo"
+  >Logo</p>
+  <dfn class="infoPanel"
+       title="Information"
+       i18n:attributes="title"
+       i18n:translate="help_sector_logo"
+  >The logo will appear on the client side app that your user group will see. Make sure your image is of format png, jpg or gif and does not contain any special characters. The new logo will only become visible after you've saved your changes and published the OiRA tool.</dfn>
+
+  <fieldset class="comprehensive radioList">
+    <p class="legend"
+       i18n:translate="label_logo_selection"
+    >Which logo you would like to display in the lower left corner?</p>
+
+    <label>
+      <input checked="${python:'checked' if not view.allow_nochange else None}"
+             name="${view/name}.action"
+             type="radio"
+             value="remove"
+      /><tal:translate i18n:translate="Official OiRA Logo">Official OiRA Logo</tal:translate>
+    </label>
+    <label>
+      <input checked="${python:'checked' if view.allow_nochange else None}"
+             name="${view/name}.action"
+             type="radio"
+             value="update"
+      /><tal:translate i18n:translate="logo_my_own">My own</tal:translate>:
+      <input name="${view/name}"
+             type="file"
+      /><tal:error condition="view/error"
+                 replace="structure view/error/render|nothing"
+      />
+    </label>
+    <input name="${view/name}.action-empty-marker"
+           type="hidden"
+           value="1"
+    />
+  </fieldset>
+
+  <div style="margin: 20px 20px">
+    <img alt=""
+         src="${scale/url}"
+         width="${scale/width}"
+         tal:define="
+           images context/@@images;
+           scale python:images.scale('logo', height=300, width=300, direction='thumbnail');
+         "
+         tal:condition="scale"
+         tal:on-error="nothing"
+    />
+  </div>
+  <p class="message notice"
+     style="width:100%"
+     i18n:translate="logo_instructions"
+  >
+          You may get the best results if you upload a logo as a
+    <strong i18n:name="transparent"
+            i18n:translate="logo_instructions_transparent"
+    >transparent</strong>
+    PNG file of at least 100 pixels in height. Uploading larger images is fine, the logo will be scaled down to the right size automatically.
+  </p>
+</fieldset>