fix: Standardize color utils and speaker session UI, timezone (#4845)

iamareebjamal · web-flow · commit 3cd3ad61bc48 · 2020-08-23T09:32:39.000+05:30
diff --git a/app/components/schedule.ts b/app/components/schedule.ts
@@ -7,7 +7,7 @@ import Speaker from 'open-event-frontend/models/speaker';
 import moment from 'moment';
 import $ from 'jquery';
 import { isTesting } from 'open-event-frontend/utils/testing';
-import { isLight } from 'open-event-frontend/utils/color';
+import { getTextColor } from 'open-event-frontend/utils/color';
 
 interface ScheduleArgs {
   event: Event,
@@ -68,7 +68,7 @@ export default class Schedule extends Component<ScheduleArgs> {
         end        : session.endsAt.tz(this.timezone).format(),
         resourceId : session.microlocation.get('id'),
         color,
-        textColor  : isLight(color) ? '#000' : '#fff',
+        textColor  : getTextColor(color),
         serverId   : session.get('id') // id of the session on BE
       };
     });
diff --git a/app/components/scheduler/unscheduled-session.js b/app/components/scheduler/unscheduled-session.js
@@ -2,7 +2,7 @@ import classic from 'ember-classic-decorator';
 import { classNames, classNameBindings } from '@ember-decorators/component';
 import $ from 'jquery';
 import Component from '@ember/component';
-import { isLight } from 'open-event-frontend/utils/color';
+import { getTextColor } from 'open-event-frontend/utils/color';
 
 @classic
 @classNames('unscheduled-session')
@@ -20,7 +20,7 @@ export default class UnscheduledSession extends Component {
       id        : $element.attr('id'),
       serverId  : this.session.id, // id of the session on the server
       color,
-      textColor : isLight(color) ? '#000' : '#fff'
+      textColor : getTextColor(color)
     });
     $element.draggable({
       zIndex         : 999,
diff --git a/app/helpers/is-light.js b/app/helpers/is-light.js
diff --git a/app/helpers/text-color.js b/app/helpers/text-color.js
diff --git a/app/helpers/text-color.ts b/app/helpers/text-color.ts
@@ -0,0 +1,7 @@
+import { getTextColor } from 'open-event-frontend/utils/color';
+import Helper from '@ember/component/helper';
+
+// inputs: bg color, dark color (chosen if bg is light), light color (chosen if bg is dark)
+export default Helper.helper(function(params: string[]): string {
+  return getTextColor(params[0], params[1], params[2]);
+});
diff --git a/app/models/track.js b/app/models/track.js
@@ -1,11 +1,11 @@
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { hasMany, belongsTo } from 'ember-data/relationships';
-import { getColor } from 'open-event-frontend/utils/colors';
+import { getRandomColor } from 'open-event-frontend/utils/color';
 
 export default ModelBase.extend({
   name        : attr('string'),
-  color       : attr('string', { defaultValue: () => getColor() }),
+  color       : attr('string', { defaultValue: () => getRandomColor() }),
   description : attr('string'),
   fontColor   : attr('string'),
 
diff --git a/app/routes/public/speakers.js b/app/routes/public/speakers.js
@@ -42,15 +42,18 @@ export default class SpeakersRoute extends Route {
         ]
       }
     ];
-    return this.infinity.model('speakers', {
-      filter       : filterOptions,
-      perPage      : 12,
-      startingPage : 1,
-      perPageParam : 'page[size]',
-      pageParam    : 'page[number]',
-      store        : eventDetails,
-      include      : 'sessions.track'
-    });
+    return {
+      event    : eventDetails,
+      speakers : await this.infinity.model('speakers', {
+        filter       : filterOptions,
+        perPage      : 12,
+        startingPage : 1,
+        perPageParam : 'page[size]',
+        pageParam    : 'page[number]',
+        store        : eventDetails,
+        include      : 'sessions.track'
+      })
+    };
 
 
   }
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
@@ -18,6 +18,10 @@
   display: none !important;
 }
 
+.rounded-default {
+  border-radius: .3rem;
+}
+
 .rounded-none {
   border-radius: 0 !important;
 }
@@ -32,6 +36,10 @@
   border-top-left-radius: 0 !important;
 }
 
+.p-4 {
+  padding: 1rem !important;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
diff --git a/app/templates/components/public/featured-speaker-list.hbs b/app/templates/components/public/featured-speaker-list.hbs
@@ -1,6 +1,6 @@
 <h3>{{t 'Featured Speakers'}}</h3>
 <div class="speaker-list ui grid">
   {{#each this.speakers as |speaker|}}
-    <Public::SpeakerItem @speaker={{speaker}} @class="five wide column" @isFeatured={{true}} />
+    <Public::SpeakerItem @speaker={{speaker}} @timezone={{@timezone}} @class="five wide column" @isFeatured={{true}} />
   {{/each}}
 </div>
diff --git a/app/templates/components/public/speaker-item.hbs b/app/templates/components/public/speaker-item.hbs
@@ -45,23 +45,23 @@
       </h3>
       {{#each this.speaker.sessions as |session|}}
         {{#if (and (eq session.deletedAt null) (or (eq session.state 'confirmed') (eq session.state 'accepted')))}}
-          <p>
-            {{#if session.startsAt}}
+          {{#if session.startsAt}}
+            <p>
               <strong>
-                {{general-date session.startsAt session.event.timezone}}
+                {{general-date session.startsAt @timezone}}
               </strong>
-            {{/if}}
-          </p>
+            </p>
+          {{/if}}
           <a href="{{href-to 'public.sessions' (query-params session_id=session.id)}}">
-            <div class="ui fluid padded" style={{css color=session.track.fontColor background-color=session.track.color}}>
-              <h3 class="item" style={{css user-select='text' color=(is-light session.track.color)}}>
+            <div class="ui fluid rounded-default p-4" style={{css color=session.track.fontColor background-color=session.track.color}}>
+              <div style={{css opacity=0.9}}>
                 {{#if (and session.startsAt session.endsAt)}}
-                  {{moment-format session.startsAt 'HH:mm'}} - {{moment-format session.endsAt 'hh:mm'}}
-                  <br>
+                  <strong>{{general-date session.startsAt @timezone 'HH:mm'}} - {{general-date session.endsAt @timezone 'hh:mm'}}</strong>
                 {{/if}}
-                &bull;&nbsp; {{session.title}}
-                <br>
-              </h3>
+                <h3 class="m-0" style={{css user-select='text' color=(text-color session.track.color)}}>
+                  {{session.title}}
+                </h3>
+              </div>
             </div>
           </a>
         <br>
diff --git a/app/templates/public/index.hbs b/app/templates/public/index.hbs
@@ -40,7 +40,7 @@
     <div class="featured-speakers" id="speakers">
       <div class="row">
         <Public::FeaturedSpeakerList
-          @speakers={{this.model.featuredSpeakers}} />
+          @speakers={{this.model.featuredSpeakers}} @timezone={{this.model.event.timezone}} />
       </div>
     </div>
     <div class="ui hidden divider"></div>
diff --git a/app/templates/public/speakers.hbs b/app/templates/public/speakers.hbs
@@ -1,11 +1,11 @@
 <div class="ui stackable grid container">
-  {{#each this.model as |speaker|}}
+  {{#each this.model.speakers as |speaker|}}
     <div class="five wide column speaker-column">
-      <Public::SpeakerItem @speaker={{speaker}} />
+      <Public::SpeakerItem @speaker={{speaker}} @timezone={{this.model.event.timezone}} />
     </div>
   {{/each}}
   <div class="sixteen wide column">
-    <InfinityLoader @infinityModel={{this.model}}>
+    <InfinityLoader @infinityModel={{this.model.speakers}}>
       <div class="ui loading very padded basic segment">
       </div>
       {{this.infintyModel.reachedInfinity}}
diff --git a/app/utils/color.ts b/app/utils/color.ts
@@ -1,3 +1,8 @@
+import palette from 'google-material-color';
+import { random } from 'lodash-es';
+
+const DEFAULT_THRESHOLD = 160;
+
 export function getLuma(hex: string): number {
   // https://stackoverflow.com/a/12043228/3309666
   const c = hex.toString().substring(1);    // strip #
@@ -9,10 +14,22 @@ export function getLuma(hex: string): number {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
 }
 
-export function isLight(hex: string, threshold = 128): boolean {
+export function isLight(hex: string, threshold = DEFAULT_THRESHOLD): boolean {
   return getLuma(hex) > threshold;
 }
 
-export function isDark(hex: string, threshold = 128): boolean {
+export function isDark(hex: string, threshold = DEFAULT_THRESHOLD): boolean {
   return !isLight(hex, threshold);
 }
+
+export function getTextColor(backgroundColor: string, darkColor = '#000', lightColor = '#fff', threshold = DEFAULT_THRESHOLD): string {
+  return isLight(backgroundColor, threshold) ? darkColor : lightColor;
+}
+
+export function getRandomColor(shades = ['600', '700', '800', '900']): string {
+  let color = null;
+  while (!color) {
+    color = palette.random(shades[random(0, 3)]);
+  }
+  return color;
+}
diff --git a/app/utils/colors.js b/app/utils/colors.js
diff --git a/tests/integration/helpers/text-color-test.js b/tests/integration/helpers/text-color-test.js
@@ -9,9 +9,9 @@ module('Integration | Helper | text-color', function(hooks) {
 
   test('it renders', async function(assert) {
     await render(hbs`{{text-color '#000000'}}`);
-    assert.equal(this.element.textContent.trim(), '#FFFFFF');
+    assert.equal(this.element.textContent.trim(), '#fff');
     await render(hbs`{{text-color '#FFFFFF'}}`);
-    assert.equal(this.element.textContent.trim(), '#000000');
+    assert.equal(this.element.textContent.trim(), '#000');
   });
 });
 
diff --git a/types/global.d.ts b/types/global.d.ts
@@ -9,3 +9,5 @@ interface JQuery {
   fullCalendar(op: string, key: string, value: unknown): void,
   fullCalendar(key: string): unknown[]
 }
+
+declare module 'google-material-color';
diff --git a/yarn.lock b/yarn.lock
@@ -1483,7 +1483,7 @@
     hi-base32 "^0.5.0"
     zalgo-promise "^1.0.28"
 
-"@sentry/apm@5.21.3", "@sentry/apm@^5.20.1":
+"@sentry/apm@5.21.3", "@sentry/apm@^5.21.3":
   version "5.21.3"
   resolved "https://registry.yarnpkg.com/@sentry/apm/-/apm-5.21.3.tgz#513f0432f70dd23b29431d7af10cbdfa0befcc51"
   integrity sha512-5Hl/ZJV9dm1a/SskwdaTX34GsgmrWGMeGPIHTkrI5iXMHObHUjbnSuPgIld/Ffi19GpjPsjEV3kxA3AQnHQCqg==
@@ -1558,24 +1558,11 @@
     lru_map "^0.3.3"
     tslib "^1.9.3"
 
-"@sentry/types@5.21.1":
-  version "5.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.21.1.tgz#b603afa2d8c331cf520ab8cef986151b18a72e73"
-  integrity sha512-hFN4aDduMpjj6vZSIIp+9kSr8MglcKO/UmbuUXN6hKLewhxt+Zj2wjXN7ulSs5OK5mjXP9QLA5YJvVQsl2//qw==
-
 "@sentry/types@5.21.3":
   version "5.21.3"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.21.3.tgz#0147f0b76c4b75559343fd46863f9b004ff3d7d4"
   integrity sha512-GU0lFZkeGJuCuNN3D8lXyBku6M1UtZzV8f8U4a4nGGFS0R3VqxDHrC3eupRc8Vut/1xfgvFz1qCkPstXUrEBuA==
 
-"@sentry/utils@5.21.1":
-  version "5.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.21.1.tgz#fb0e96e6134a9d1e9e6eb62c1d9e0c59faac8c25"
-  integrity sha512-p5vPuc7+GfOmW8CXxWd0samS77Q00YrN8q5TC/ztF8nBhEF18GiMeWAdQnlSwt3iWal3q3gSSrbF4c9guIugng==
-  dependencies:
-    "@sentry/types" "5.21.1"
-    tslib "^1.9.3"
-
 "@sentry/utils@5.21.3":
   version "5.21.3"
   resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.21.3.tgz#f55237bab454a43edcf2cd77fa2753e7509d7a94"

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,10 @@`
`18`	`18`	`display: none !important;`
`19`	`19`	`}`
`20`	`20`
	`21`	`+.rounded-default {`
	`22`	`+ border-radius: .3rem;`
	`23`	`+}`
	`24`	`+`
`21`	`25`	`.rounded-none {`
`22`	`26`	`border-radius: 0 !important;`
`23`	`27`	`}`
`@@ -32,6 +36,10 @@`
`32`	`36`	`border-top-left-radius: 0 !important;`
`33`	`37`	`}`
`34`	`38`
	`39`	`+.p-4 {`
	`40`	`+ padding: 1rem !important;`
	`41`	`+}`
	`42`	`+`
`35`	`43`	`.mt-8 {`
`36`	`44`	`margin-top: 2rem;`
`37`	`45`	`}`