style: allow picto on launchers (#3402)

univcloud/apps/launcher.py

@@ -18,6 +18,9 @@
 
 '''Launcher App'''
 
+import urlparse
+from django.template.defaultfilters import slugify
+
 from .base import BaseApp
 
 class App(BaseApp):
@@ -27,13 +30,21 @@ class App(BaseApp):
     sizey = 1
     label = None
     url = None
+    picto = None
 
-    def __init__(self, app_id, label='label', url='#', **kwargs):
+    def __init__(self, app_id, label='label', url='#', picto=None, **kwargs):
         super(App, self).__init__(app_id, **kwargs)
         self.label = label
         self.url = url
+        self.picto = picto
 
     def get_content_args(self):
         args = super(App, self).get_content_args()
+        app_domain = None
         args.update({'url': self.url, 'label': self.label})
+        if self.url:
+            app_domain = urlparse.urlparse(self.url)[1]
+            args['app_domain'] = app_domain
+        if self.picto:
+            args['app_picto'] = self.picto
         return args

univcloud/static/css/style.css

@@ -33,6 +33,10 @@ div.gridster > ul > li {
   border-radius: 0em;
 }
 
+div.gridster > ul > li:hover {
+  border-style: solid;
+}
+
 div.gridster > ul > li.scroll {
   overflow-y: auto;
 }
@@ -143,6 +147,48 @@ div.app {
   height: 100%;
 }
 
+div.app-has-picto {
+  font-size: 100%;
+  padding-top: 0;
+  text-align: left;
+}
+
+div.app-has-picto a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+div.app-has-picto a span {
+  position: absolute;
+  bottom: 3px;
+  left: 5px;
+}
+
+div.app-picto-wcs a {
+  background: transparent url(../img/face-monkey-symbolic.png) center center no-repeat;
+}
+
+li.bright-bg div.app-picto-wcs a {
+  background-image: url(../img/face-monkey-symbolic-dark.png);
+}
+
+div.app-picto-unpidf a {
+  background: transparent url(../img/accessories-dictionary-symbolic.png) center center no-repeat;
+}
+
+li.bright-bg div.app-picto-unpidf a {
+  background-image: url(../img/accessories-dictionary-symbolic-dark.png);
+}
+
+li.dark-bg div.app-has-picto a {
+  color: white;
+}
+
+li.bright-bg div.app-has-picto a {
+  color: black;
+}
+
 #iframe {
   display: none;
 }

univcloud/templates/apps/launcher.html

@@ -1,5 +1,5 @@
-<div id="{{app_id}}" class="app">
-  <a href="#">{{label}}</a>
+<div id="{{app_id}}" class="app {% if app_domain %}app-{{app_domain}}{% endif %} {% if app_picto %}app-has-picto app-picto-{{app_picto}}{% endif %}">
+  <a href="#"><span>{{label}}</span></a>
 </div>
 <script>
 $(function(){ //DOM Ready

univcloud/views.py

@@ -52,6 +52,7 @@ class Homepage(TemplateView):
                         'background_color': '#ccffff'}),
                 'app004': ('launcher', {'row': 1, 'col': 5,
                         'label': u'Demandes en ligne',
+                        'picto': u'wcs',
                         'background_color': '#ccff99',
                         'url': 'http://univcloud.au-quotidien.com'}),
                 'app005': ('help', {'row': 2, 'col': 3}),
@@ -63,6 +64,7 @@ class Homepage(TemplateView):
                         'feed_url': 'http://www.lemonde.fr/rss/une.xml'}),
                 'app008': ('launcher', {'row': 3, 'col': 3,
                         'label': u'UNPiDF',
+                        'picto': u'unpidf',
                         'background_color': '#cccc99',
                         'url': 'http://unpidf.univ-paris1.fr'}),
                  })