#479 Avatar handling
Merged 4 years ago by abompard. Opened 4 years ago by ryanlerch.
ryanlerch/fedora-hubs avatar-and-stars  into  develop

file modified
+3 -1
@@ -10,7 +10,7 @@ 

  from flask_oidc import OpenIDConnect

  

  import hubs.models

- from hubs.utils import get_fedmsg_config, username2avatar

+ from hubs.utils import get_fedmsg_config, username2avatar, hub2groupavatar

  

  app = flask.Flask(__name__)

  
@@ -22,6 +22,8 @@ 

  

  app.template_filter('days_since')(days_since)

  app.template_filter('avatar')(username2avatar)

+ app.template_filter('hub2groupavatar')(hub2groupavatar)

+ 

  

  logging.basicConfig()

  

file modified
+1 -4
@@ -70,9 +70,6 @@ 

  log = logging.getLogger(__name__)

  

  

- placekitten = "https://placekitten.com/g/320/320"

- 

- 

  def randomheader():

      location = '/static/img/headers/'

      header_dir = os.path.dirname(__file__) + location
@@ -358,7 +355,7 @@ 

      summary = sa.Column(sa.String(128))

      left_width = sa.Column(sa.Integer, nullable=False, default=8)

      # A URL to the "avatar" for this hub.

-     avatar = sa.Column(sa.String(256), default=placekitten)

+     avatar = sa.Column(sa.String(256), default="")

      header_img = sa.Column(sa.String(256), default=randomheader)

      chat_channel = sa.Column(sa.String(256), nullable=True)

      chat_domain = sa.Column(sa.String(256), nullable=True)

@@ -9,8 +9,9 @@ 

    */

  }

  

- .HubHeader img.avatar {

+ .HubHeader .avatar {

      width: 70px;

+     height: 70px;

      float: left;

      margin-right: 15px;

      display: inline;

@@ -7,11 +7,11 @@ 

  import HubStats from './HubStats';

  import HubMembership from './HubMembership';

  import HubStar from './HubStar';

+ import { monogramColour } from '../core/utils';

  import "./HubHeader.css";

  

  

  class HubHeader extends React.Component {

- 

    render() {

      return (

        <div className="HubHeader">
@@ -20,35 +20,30 @@ 

          }

          { this.props.hub.name &&

            <div className="row">

-             <div className={`col-md-${this.props.hub.config.left_width}`}>

+             <div className={`col-md-${this.props.hub.config.left_width} pl-0`}>

                <HubStats

                  hub={this.props.hub}

                  />

-               { this.props.hub.user_hub ?

                  <div>

+                 { !this.props.hub.config.avatar ?

+                   <div className={`monogram-avatar avatar bg-fedora-${monogramColour(this.props.hub.name)} color-fedora-${monogramColour(this.props.hub.name)}-dark`}>

+                     {this.props.hub.name.charAt(0).toUpperCase()}

+                   </div>

+                 :

                    <img

                      className="avatar"

                      src={this.props.hub.config.avatar}

                      />

+                 }

                    <h2 className="user pt-0">

                      {this.props.hub.name}

+                     <HubStar />

                    </h2>

                    <h5 className="mt-1 mb-1">

                      {this.props.hub.config.summary}

                    </h5>

                    <div className="clearfix"></div>

                  </div>

-               :

-                 <div>

-                   <HubStar />

-                   <h2 className="team pt-0">

-                     {this.props.hub.name}

-                   </h2>

-                   <h5 className="mt-1 mb-1">

-                     {this.props.hub.config.summary}

-                   </h5>

-                 </div>

-               }

              </div>

              <div className={`col-md-${this.props.hub.config.right_width} text-center align-self-center`}>

                <HubMembership />

@@ -1,8 +1,7 @@ 

  .HubStar {

-     position: absolute;

-     left: -1.2rem;

      line-height: 2rem;

      font-size: 1.2rem;

-     color: #000;

+     color: #aaa;

      z-index: 1; /* Above the left menu */

+     vertical-align: middle;

  }

@@ -37,10 +37,6 @@ 

    }

  

    render() {

-     if (!this.props.hub.name || this.props.hub.user_hub) {

-       // Only for team hubs

-       return null;

-     }

      const icon = this.isStarred() ? "star" : "star-o";

      let otherProps = {}

      if (!this.props.currentUser.logged_in) {

@@ -1,5 +1,6 @@ 

  import React from 'react';

  import fetch from 'isomorphic-fetch';

+ import md5 from 'js-md5';

  import universal from 'react-universal-component'

  

  
@@ -93,3 +94,9 @@ 

    }

    return SyncLoadable;

  }

+ 

+ export function monogramColour(hubname) {

+   var colours = ["blue", "green", "magenta", "orange", "purple"]

+   var index = parseInt(md5(hubname).substring(0,4), 16) % 5;

+   return colours[index];

+ }

@@ -9,6 +9,7 @@ 

    "dependencies": {

      "babel-polyfill": "^6.26.0",

      "isomorphic-fetch": "^2.2.1",

+     "js-md5": "^0.7.2",

      "prop-types": "^15.5.10",

      "react": "^15.6.1",

      "react-autosuggest": "^9.3.2",

file modified
+3 -3
@@ -392,10 +392,10 @@ 

  }

  

  .monogram-avatar{

-   width:64px;

-   height:64px;

+   width:60px;

+   height:60px;

    font-size:54px;

-   line-height: 64px;

+   line-height: 58px;

    font-weight: 700;

    text-align: center;

  }

file modified
+2 -2
@@ -35,8 +35,8 @@ 

              ].join('\n'),

              suggestion: function(datum) {

                  output = '<div class="py-1 media">'

-                 if (datum.user_hub){

-                     output = output+'<img width="64px" height="64px" src="'+datum.config.avatar+'"/>'

+                 if (datum.config.avatar){

+                     output = output+'<img width="60px" height="60px" src="'+datum.config.avatar+'"/>'

                  } else {

                      output = output+'<div class="monogram-avatar bg-fedora-'+datum.monogram_colour+' text-fedora-'+datum.monogram_colour+'-dark">'+datum.name.charAt(0).toUpperCase()+'</div>'                   

                  }

@@ -20,6 +20,8 @@ 

  

          self.session.add(hubs.models.Hub(name="designteam"))

          hub = hubs.models.Hub.by_name('designteam')

+         self.session.add(

+             hubs.models.HubConfig(hub=hub, summary="the designteam team"))

          hub.subscribe(hubs.models.User.by_username('ralph'), 'member')

  

      def test_view_authz(self):

file modified
+10 -1
@@ -35,5 +35,14 @@ 

  

  def hubname2monogramcolour(hubname):

      colours = ["blue", "green", "magenta", "orange", "purple"]

-     colour_index = int(md5(hubname.encode('utf8')).hexdigest(), 16) % 5

+     colour_index = int(md5(hubname.encode('utf8')).hexdigest()[:4], 16) % 5

      return colours[colour_index]

+ 

+ 

+ def hub2groupavatar(hub):

+     if hub.config.avatar != "":

+         return '<img src="%s" width="60px" />' % (hub.config.avatar)

+     return ("<div class='monogram-avatar bg-fedora-%s text-fedora-%s-dark'>"

+             "%s</div>") % (hubname2monogramcolour(hub.name),

+                            hubname2monogramcolour(hub.name),

+                            hub.name[0].upper())

file modified
+2
@@ -10,6 +10,7 @@ 

  from .caching import CachedFunction

  from .view import WidgetView

  from .parameters import WidgetParameter

+ from hubs.utils import hub2groupavatar

  

  log = logging.getLogger(__name__)

  
@@ -136,6 +137,7 @@ 

                  trim_blocks=True,

              )

              env.filters['tojson'] = flask.json.tojson_filter

+             env.filters['hub2groupavatar'] = hub2groupavatar

Please also register it in hubs/app.py (around line 25) so non-widget Flask templates can use it too.

              env.globals.update({

                  'session': flask.app.session,

                  'g': flask.g,

@@ -1,7 +1,7 @@ 

  from __future__ import unicode_literals

  

  import hubs.models

- from hubs.utils import get_fedmsg_config, hubname2monogramcolour

+ from hubs.utils import get_fedmsg_config

  from hubs.widgets.base import Widget

  from hubs.widgets.view import RootWidgetView

  
@@ -25,37 +25,25 @@ 

          username = instance.hub.name

  

          user = hubs.models.User.by_username(username)

-         monograms = {}

          ownerships = []

          assoc = []

          for hub in user.ownerships:

              if not hub.user_hub:

                  ownerships.append(hub)

                  assoc.append(hub.name)

-                 monograms[hub.name] = generate_monogram(hub.name)

          memberships = []

          for hub in user.memberships:

              if not hub.user_hub:

                  if hub.name not in assoc:

                      memberships.append(hub)

                      assoc.append(hub.name)

-                     monograms[hub.name] = generate_monogram(hub.name)

          subscriptions = []

          for hub in user.subscriptions:

              if not hub.user_hub:

                  if hub.name not in assoc:

                      subscriptions.append(hub)

-                     monograms[hub.name] = generate_monogram(hub.name)

          return dict(

              ownerships=ownerships,

              memberships=memberships,

              subscriptions=subscriptions,

-             monograms=monograms,

          )

- 

- 

- def generate_monogram(hubname):

-     return ("<div class='monogram-avatar bg-fedora-%s text-fedora-%s-dark'>"

-             "%s</div>") % (hubname2monogramcolour(hubname),

-                            hubname2monogramcolour(hubname),

-                            hubname[0].upper())

@@ -3,7 +3,7 @@ 

      {% for ownership in ownerships %}

          <li class="media py-2">

              <div class="align-self-center mr-3">

-                 {{monograms[ownership.name]}}

+                 {{ownership|hub2groupavatar}}

              </div>

              <div class="media-body">

                  <div>
@@ -16,7 +16,7 @@ 

      {% for membership in memberships %}

      <li class="media py-2">

              <div class="align-self-center mr-3">

-                 {{monograms[membership.name]}}

+                 {{membership|hub2groupavatar}}

              </div>

              <div class="media-body">

                  <div>
@@ -29,7 +29,7 @@ 

      {% for subscription in subscriptions %}

      <li class="media py-2">

              <div class="align-self-center mr-3">

-                 {{monograms[subscription.name]}}

+                 {{subscription|hub2groupavatar}}

              </div>

              <div class="media-body">

                  <div>

file modified
+9 -18
@@ -14,14 +14,15 @@ 

  

  session = hubs.models.init(fedmsg_config['hubs.sqlalchemy.uri'], True, True)

  

+ placekitten = "https://placekitten.com/g/320/320"

+ 

  # Register widgets we will use

  hubs.widgets.registry.register_list([

-     "hubs.widgets.contact:Contact",

      "hubs.widgets.rules:Rules",

      "hubs.widgets.meetings:Meetings",

      "hubs.widgets.about:About",

      "hubs.widgets.sticky:Sticky",

-     "hubs.widgets.dummy:Dummy",

+     "hubs.widgets.feed:Feed",

      ])

  

  users = ['mrichard', 'duffy', 'ryanlerch', 'gnokii', 'nask0',
@@ -39,10 +40,8 @@ 

  hub = hubs.models.Hub(name='i18n', archived=True)

  session.add(hub)

  session.add(hubs.models.HubConfig(

-     hub=hub, summary='The Internationalization Team'))

+     hub=hub, summary='The Internationalization Team', avatar=placekitten))

  

- widget = hubs.models.Widget(plugin='contact', index=0)

- hub.widgets.append(widget)

  widget = hubs.models.Widget(

      plugin='rules', index=1, _config=json.dumps({

          'link': 'https://fedoraproject.org/wiki/I18N',
@@ -78,7 +77,7 @@ 

  """,

      }))

  hub.widgets.append(widget)

- widget = hubs.models.Widget(plugin='dummy', index=2, left=True)

+ widget = hubs.models.Widget(plugin='feed', index=2, left=True)

  hub.widgets.append(widget)

  

  
@@ -96,8 +95,6 @@ 

  session.add(hubs.models.HubConfig(

      hub=hub, summary='The Fedora Community Operations Team'))

  

- widget = hubs.models.Widget(plugin='contact', index=0)

- hub.widgets.append(widget)

  widget = hubs.models.Widget(

      plugin='rules', index=1, _config=json.dumps({

          'link': 'https://fedoraproject.org/wiki/CommOps',
@@ -128,7 +125,7 @@ 

                  "communities that build things.'",

      }))

  hub.widgets.append(widget)

- widget = hubs.models.Widget(plugin='dummy', index=2, left=True)

+ widget = hubs.models.Widget(plugin='feed', index=2, left=True)

  hub.widgets.append(widget)

  

  
@@ -148,8 +145,6 @@ 

  session.add(hubs.models.HubConfig(

      hub=hub, summary='The Fedora Marketing Team'))

  

- widget = hubs.models.Widget(plugin='contact', index=0)

- hub.widgets.append(widget)

  widget = hubs.models.Widget(

      plugin='rules', index=1, _config=json.dumps({

          'link': 'https://fedoraproject.org/wiki/Marketing',
@@ -186,7 +181,7 @@ 

  """,

      }))

  hub.widgets.append(widget)

- widget = hubs.models.Widget(plugin='dummy', index=2, left=True)

+ widget = hubs.models.Widget(plugin='feed', index=2, left=True)

  hub.widgets.append(widget)

  

  
@@ -207,8 +202,6 @@ 

  session.add(hubs.models.HubConfig(

      hub=hub, summary='The Fedora Design Team'))

  

- widget = hubs.models.Widget(plugin='contact', index=0)

- hub.widgets.append(widget)

  widget = hubs.models.Widget(

      plugin='rules', index=1, _config=json.dumps({

          'link': 'https://fedoraproject.org/wiki/Design',
@@ -241,7 +234,7 @@ 

  """,

      }))

  hub.widgets.append(widget)

- widget = hubs.models.Widget(plugin='dummy', index=2, left=True)

+ widget = hubs.models.Widget(plugin='feed', index=2, left=True)

  hub.widgets.append(widget)

  

  
@@ -263,8 +256,6 @@ 

  session.add(hubs.models.HubConfig(

      hub=hub, summary='The Fedora Infra Team'))

  

- widget = hubs.models.Widget(plugin='contact', index=0)

- hub.widgets.append(widget)

  widget = hubs.models.Widget(

      plugin='rules', index=1, _config=json.dumps({

          'link': 'https://fedoraproject.org/wiki/Infrastructure',
@@ -299,7 +290,7 @@ 

  """,

      }))

  hub.widgets.append(widget)

- widget = hubs.models.Widget(plugin='dummy', index=3, left=True)

+ widget = hubs.models.Widget(plugin='feed', index=3, left=True)

  hub.widgets.append(widget)

  

  vc = hubs.models.VisitCounter().get_or_create(session, 'ralph', 'mrichard')

Primarily, this PR fixes the avatar handling of groups:

  • fix the model to no longer use placekitten as a default avatar for every group hub, instead make it empty.
  • change populate.py to set a placekitten for the i18n group, and leave the rest blank
  • abstracts out the monogram generation code in the python to a filter that we can use in the templates
  • make the myhubs widget use this new abstracted code, and show avatars if the url is set, the monogram if it is not set
  • re-create the monogram generation code in javascript for use in the react stuff
  • add the avatar to the group hubs page (had to move the location of the star a bit)
  • add the star to the user hub page

fixes #476 #470

rebased onto 2c317a8

4 years ago

Please also register it in hubs/app.py (around line 25) so non-widget Flask templates can use it too.

4 new commits added

  • make hub avatars show in search if they are set
  • add avatar to group hubs, add star to user hubs
  • make myhubs widget use either the avatar URL or the monogram
  • remove placekittin from model, update populate.py
4 years ago

4 new commits added

  • make hub avatars show in search if they are set
  • add avatar to group hubs, add star to user hubs
  • make myhubs widget use either the avatar URL or the monogram
  • remove placekittin from model, update populate.py
4 years ago

slowly getting better at interactive rebases, but i got-er-done.

registered the filter in the app,py,

removed the extra spaces and console.log in the utils.js

Thanks! Does it make sense to show the star for a user's own hub? What about hubs where they're already a member or an owner?

i'm thinking we might keep it for if you are a member / owner -- i think the way mo wants it to work is that stars are at the top of the bookmarks, super-special ones.

def remove starring yourself, as it is always at the top of the bookmarks anyways.

either way, i am working on another PR right now to actually get the stars working, do you mind if i add the logic to remove it for a own user hub in that PR?

Pull-Request has been merged by abompard

4 years ago