fedora-hubs

Clone

#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)

file modified
+2 -1 
@@ -9,8 +9,9 @@ 
 

    */
 

  }
 

  

- .HubHeader img.avatar {
 

+ .HubHeader .avatar {
 

      width: 70px;
 

+     height: 70px;
 

      float: left;
 

      margin-right: 15px;
 

      display: inline;

file modified
+9 -14 
@@ -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 />

file modified
+2 -3 
@@ -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;
 

  }

file modified
-4 
@@ -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) {

file modified
+7 
@@ -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];
 

+ }

file modified
+1 
@@ -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>'                   

                  }

file modified
+2 
@@ -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,

file modified
+1 -13 
@@ -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())

file modified
+3 -3 
@@ -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.

I SEE DEAD SPACES...

Leftover console.log() call here.

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?

Sure! :-)

Pull-Request has been merged by abompard
4 years ago
Metadata
None
No Tags
Changes Summary 16
+3 -1
file changed
hubs/app.py
+1 -4
file changed
hubs/models.py
+2 -1
file changed
hubs/static/client/app/components/HubHeader.css
+9 -14
file changed
hubs/static/client/app/components/HubHeader.js
+2 -3
file changed
hubs/static/client/app/components/HubStar.css
+0 -4
file changed
hubs/static/client/app/components/HubStar.js
+7 -0
file changed
hubs/static/client/app/core/utils.js
+1 -0
file changed
hubs/static/client/package.json
+3 -3
file changed
hubs/static/css/style.css
+2 -2
file changed
hubs/static/js/search.js
+2 -0
file changed
hubs/tests/widgets/test_my_hubs.py
+10 -1
file changed
hubs/utils/__init__.py
+2 -0
file changed
hubs/widgets/base.py
+1 -13
file changed
hubs/widgets/my_hubs/__init__.py
+3 -3
file changed
hubs/widgets/my_hubs/templates/root.html
+9 -18
file changed
populate.py
Powered by Pagure 5.13.3
Documentation • File an Issue • About • SSH Hostkey/Fingerprint
© Red Hat, Inc. and others.