diff --git a/package-lock.json b/package-lock.json index e2a6e42..92cfcab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,11 @@ "requires": true, "packages": { "": { + "name": "cake", "version": "0.0.1", "license": "MIT", "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.3", "@material/mwc-button": "^0.20.0", "@material/mwc-dialog": "^0.20.0", "@material/mwc-textfield": "^0.20.0", @@ -467,6 +469,15 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", + "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@ionic/core": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.0.tgz", @@ -5700,7 +5711,6 @@ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "dependencies": { - "graceful-fs": "^4.1.6", "universalify": "^2.0.0" }, "optionalDependencies": { @@ -9729,6 +9739,11 @@ "strip-json-comments": "^3.1.1" } }, + "@fortawesome/fontawesome-free": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", + "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==" + }, "@ionic/core": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.0.tgz", @@ -16294,7 +16309,6 @@ "resolved": "https://registry.npmjs.org/ulog/-/ulog-2.0.0-beta.18.tgz", "integrity": "sha512-VDu/VBOAJxUr2+WBrNdSWSFc9TzjUppf5hNVTYkW3hf23oEWMYftS0w2cImoH6tKnhBvzCy/z6ZNgorPYyfnWA==", "requires": { - "anylogger": "^1.0.10", "kurly": "^2.0.0-beta.3" } }, diff --git a/package.json b/package.json index fe3417f..33761a3 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "xo": "^0.38.2" }, "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.3", "@material/mwc-button": "^0.20.0", "@material/mwc-dialog": "^0.20.0", "@material/mwc-textfield": "^0.20.0", diff --git a/src/assets/images/avatar2.jpg b/src/assets/images/avatar2.jpg new file mode 100644 index 0000000..37c6aaf Binary files /dev/null and b/src/assets/images/avatar2.jpg differ diff --git a/src/assets/images/avatar3.jpg b/src/assets/images/avatar3.jpg new file mode 100644 index 0000000..5df4055 Binary files /dev/null and b/src/assets/images/avatar3.jpg differ diff --git a/src/components.d.ts b/src/components.d.ts index f884fae..b66b82f 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -15,7 +15,7 @@ export namespace Components { } interface ExternalAuthStrategy { "icon": string; - "id": string; + "identifier": string; "invitationEmail": string; "invitationToken": string; "name": string; @@ -61,6 +61,10 @@ export namespace Components { } interface OaeNewsfeed { } + interface OaeNewsfeedFolder { + } + interface OaeNewsfeedGroups { + } interface OaeSidebar { "avatar": string; "image": string; @@ -189,6 +193,18 @@ declare global { prototype: HTMLOaeNewsfeedElement; new (): HTMLOaeNewsfeedElement; }; + interface HTMLOaeNewsfeedFolderElement extends Components.OaeNewsfeedFolder, HTMLStencilElement { + } + var HTMLOaeNewsfeedFolderElement: { + prototype: HTMLOaeNewsfeedFolderElement; + new (): HTMLOaeNewsfeedFolderElement; + }; + interface HTMLOaeNewsfeedGroupsElement extends Components.OaeNewsfeedGroups, HTMLStencilElement { + } + var HTMLOaeNewsfeedGroupsElement: { + prototype: HTMLOaeNewsfeedGroupsElement; + new (): HTMLOaeNewsfeedGroupsElement; + }; interface HTMLOaeSidebarElement extends Components.OaeSidebar, HTMLStencilElement { } var HTMLOaeSidebarElement: { @@ -222,6 +238,8 @@ declare global { "oae-library-mosaic": HTMLOaeLibraryMosaicElement; "oae-library-table": HTMLOaeLibraryTableElement; "oae-newsfeed": HTMLOaeNewsfeedElement; + "oae-newsfeed-folder": HTMLOaeNewsfeedFolderElement; + "oae-newsfeed-groups": HTMLOaeNewsfeedGroupsElement; "oae-sidebar": HTMLOaeSidebarElement; "oae-tag": HTMLOaeTagElement; } @@ -236,7 +254,7 @@ declare namespace LocalJSX { } interface ExternalAuthStrategy { "icon"?: string; - "id"?: string; + "identifier"?: string; "invitationEmail"?: string; "invitationToken"?: string; "name"?: string; @@ -282,6 +300,10 @@ declare namespace LocalJSX { } interface OaeNewsfeed { } + interface OaeNewsfeedFolder { + } + interface OaeNewsfeedGroups { + } interface OaeSidebar { "avatar"?: string; "image"?: string; @@ -309,6 +331,8 @@ declare namespace LocalJSX { "oae-library-mosaic": OaeLibraryMosaic; "oae-library-table": OaeLibraryTable; "oae-newsfeed": OaeNewsfeed; + "oae-newsfeed-folder": OaeNewsfeedFolder; + "oae-newsfeed-groups": OaeNewsfeedGroups; "oae-sidebar": OaeSidebar; "oae-tag": OaeTag; } @@ -337,6 +361,8 @@ declare module "@stencil/core" { "oae-library-mosaic": LocalJSX.OaeLibraryMosaic & JSXBase.HTMLAttributes; "oae-library-table": LocalJSX.OaeLibraryTable & JSXBase.HTMLAttributes; "oae-newsfeed": LocalJSX.OaeNewsfeed & JSXBase.HTMLAttributes; + "oae-newsfeed-folder": LocalJSX.OaeNewsfeedFolder & JSXBase.HTMLAttributes; + "oae-newsfeed-groups": LocalJSX.OaeNewsfeedGroups & JSXBase.HTMLAttributes; "oae-sidebar": LocalJSX.OaeSidebar & JSXBase.HTMLAttributes; "oae-tag": LocalJSX.OaeTag & JSXBase.HTMLAttributes; } diff --git a/src/components/app-profile/app-profile.tsx b/src/components/app-profile/app-profile.tsx index a4e41bb..0d13bcc 100644 --- a/src/components/app-profile/app-profile.tsx +++ b/src/components/app-profile/app-profile.tsx @@ -25,10 +25,8 @@ export class AppProfile { Profile: {this.name} , -

Hi! My name is {this.formattedName()}. My name was passed in through a route param!

- Setting ({this.state.toString()}) (this.state = ev.detail.checked)} /> diff --git a/src/components/external-auth-strategy/external-auth-strategy.tsx b/src/components/external-auth-strategy/external-auth-strategy.tsx index 78a6df1..5a6b7f8 100644 --- a/src/components/external-auth-strategy/external-auth-strategy.tsx +++ b/src/components/external-auth-strategy/external-auth-strategy.tsx @@ -10,7 +10,7 @@ const log = anylogger('external-auth-strategy'); }) export class ExternalAuthStrategy { @Prop() name: string; - @Prop() id: string; + @Prop() identifier: string; @Prop() url: string; @Prop() icon: string; @Prop() redirectUrl: string; @@ -35,7 +35,7 @@ export class ExternalAuthStrategy { } render() { - const socialButtonClass = `${this.id} button is-round signIn-button`; + const socialButtonClass = `${this.identifier} button is-round signIn-button`; return (
diff --git a/src/components/local-auth-strategy/local-auth-strategy.tsx b/src/components/local-auth-strategy/local-auth-strategy.tsx index 30e60f0..5ac075a 100644 --- a/src/components/local-auth-strategy/local-auth-strategy.tsx +++ b/src/components/local-auth-strategy/local-auth-strategy.tsx @@ -12,7 +12,6 @@ import { Listen, State, Prop, Component, h, Element } from '@stencil/core'; import '@material/mwc-button'; import '@material/mwc-textfield'; -import rootStore from '../../stores/root-store'; import { equals, defaultTo, prop, compose, isEmpty, not } from 'ramda'; const isNotEmpty = compose(not, isEmpty); diff --git a/src/components/oae-dashboard/oae-dashboard.tsx b/src/components/oae-dashboard/oae-dashboard.tsx index d73e039..ba86927 100644 --- a/src/components/oae-dashboard/oae-dashboard.tsx +++ b/src/components/oae-dashboard/oae-dashboard.tsx @@ -12,10 +12,10 @@ export class Dashboard { return (
+ - - - + +
); diff --git a/src/components/oae-newsfeed-folder/oae-newsfeed-folder.scss b/src/components/oae-newsfeed-folder/oae-newsfeed-folder.scss new file mode 100644 index 0000000..b24fd91 --- /dev/null +++ b/src/components/oae-newsfeed-folder/oae-newsfeed-folder.scss @@ -0,0 +1,154 @@ +.box { + box-shadow: none; + background-color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + &:hover { + //box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + } +} + +.box-feed { + margin-top: 25px; + padding: 5px; + border: none; +} + +* { + font-size: 1m; +} + +// Avatar +.avatar-news-feed img { + height: 100%; + object-fit: cover; +} + +.content figure { + margin-left: 0; + margin-right: 1em; +} + +// Avatar Info +p.user-info { + margin-bottom: 0 !important; +} + +.content p { + font-size: 1em; + margin-bottom: 0; +} + +.news-feed { + padding: 10px; +} + +.news-feed-top { + margin-bottom: 0; +} + +.news-feed-message { + margin-left: 65px; + margin-right: 65px; + margin-top: -3em; + width: auto; + background-color: #f9f8ff; + border-radius: 5px; + word-wrap: break-word; +} + +.news-feed-message h5 { + font-weight: bold; + margin-bottom: 5px; +} + +.feed-user { + text-decoration: none; + color: #424242; + font-weight: bold; + &:hover { + color: #2962ff; + background-color: #f5f7ff; + text-decoration: underline; + } +} + +.avatar-news-feed { + width: 50px; + height: 50px; +} + +.bottom-nav-news { + margin-left: 70px; + margin-top: 2em; + margin-bottom: 1em; +} + +.news-feed-break { + margin-top: 3em; +} + +.comments-button { + border: none; + background-color: transparent; + height: 5px; + color: #424242; + width: 0; + margin-left: 55px; + &:hover { + color: #2962ff; + text-decoration: underline; + } +} + +.reply-button { + border: none; + background-color: transparent; + height: 5px; + color: #424242; + width: 0; + margin-left: 90px; + &:hover { + color: #2962ff; + text-decoration: underline; + } +} + +.comments-icon { + color: #272b2e; + margin-right: 5px; + &:hover { + color: #272b2e; + } +} + +.reply-icon { + color: #272b2e; + margin-right: 5px; + &:hover { + color: #272b2e; + } +} + +.icon-feed { + color: #272b2e; + margin-left: 5px; + margin-right: 5px; +} + +.news-pin { + margin-right: 15px; + margin-top: -50px; + border-radius: 25px; + border: none; + background-color: white; + color: #424242; + &:hover { + color: #2962ff; + } + &:focus, + :active { + border: none; + } +} diff --git a/src/components/oae-newsfeed-folder/oae-newsfeed-folder.tsx b/src/components/oae-newsfeed-folder/oae-newsfeed-folder.tsx new file mode 100644 index 0000000..82f94aa --- /dev/null +++ b/src/components/oae-newsfeed-folder/oae-newsfeed-folder.tsx @@ -0,0 +1,58 @@ +import { Component, h } from '@stencil/core'; + +import '@polymer/iron-icons/iron-icons.js'; +import '@polymer/iron-icons/social-icons.js'; +import '@polymer/iron-icons/editor-icons.js'; +import '@polymer/iron-icons/av-icons.js'; +import '@polymer/iron-icons/hardware-icons.js'; +import '@polymer/iron-icons/communication-icons.js'; + +@Component({ + tag: 'oae-newsfeed-folder', + styleUrl: 'oae-newsfeed-folder.scss', +}) + +export class NewsFeed { + render() { + return ( +
+
+ +
+
+ ); + } +} diff --git a/src/components/oae-newsfeed-groups/oae-newsfeed-groups.scss b/src/components/oae-newsfeed-groups/oae-newsfeed-groups.scss new file mode 100644 index 0000000..7449439 --- /dev/null +++ b/src/components/oae-newsfeed-groups/oae-newsfeed-groups.scss @@ -0,0 +1,153 @@ +.box { + box-shadow: none; + background-color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + &:hover { + //box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + } +} + +.box-feed { + margin-top: 25px; + padding: 5px; + border: none; +} + +* { + font-size: 1m; +} + +// Avatar +.avatar-news-feed img { + height: 100%; + object-fit: cover; +} + +.content figure { + margin-left: 0; + margin-right: 1em; +} + +// Avatar Info +p.user-info { + margin-bottom: 0 !important; +} + +.content p { + font-size: 1em; + margin-bottom: 0; +} + +.news-feed { + padding: 10px; +} + +.news-feed-top { + margin-bottom: 0; +} + +.news-feed-message { + margin-left: 65px; + margin-right: 65px; + margin-top: -3em; + width: auto; + background-color: #f9f8ff; + border-radius: 5px; + word-wrap: break-word; +} + +.news-feed-message h5 { + font-weight: bold; + margin-bottom: 5px; +} + +.feed-user { + text-decoration: none; + color: #424242; + font-weight: bold; + &:hover { + color: #2962ff; + background-color: #f5f7ff; + text-decoration: underline; + } +} + +.avatar-news-feed { + width: 50px; + height: 50px; +} + +.bottom-nav-news { + margin-left: 70px; + margin-top: 2em; + margin-bottom: 1em; +} + +.news-feed-break { + margin-top: 3em; +} + +.comments-button { + border: none; + background-color: transparent; + height: 5px; + color: #424242; + width: 0; + margin-left: 55px; + &:hover { + color: #2962ff; + text-decoration: underline; + } +} + +.reply-button { + border: none; + background-color: transparent; + height: 5px; + color: #424242; + width: 0; + margin-left: 90px; + &:hover { + color: #2962ff; + text-decoration: underline; + } +} + +.comments-icon { + color: #272b2e; + margin-right: 5px; + &:hover { + color: #272b2e; + } +} + +.reply-icon { + color: #272b2e; + margin-right: 5px; + &:hover { + color: #272b2e; + } +} + +.icon-feed { + color: #272b2e; + margin-left: 5px; +} + +.news-pin { + margin-right: 15px; + margin-top: -50px; + border-radius: 25px; + border: none; + background-color: white; + color: #424242; + &:hover { + color: #2962ff; + } + &:focus, + :active { + border: none; + } +} diff --git a/src/components/oae-newsfeed-groups/oae-newsfeed-groups.tsx b/src/components/oae-newsfeed-groups/oae-newsfeed-groups.tsx new file mode 100644 index 0000000..c49a355 --- /dev/null +++ b/src/components/oae-newsfeed-groups/oae-newsfeed-groups.tsx @@ -0,0 +1,56 @@ +import { Component, h } from '@stencil/core'; + +import '@polymer/iron-icons/iron-icons.js'; +import '@polymer/iron-icons/social-icons.js'; +import '@polymer/iron-icons/editor-icons.js'; +import '@polymer/iron-icons/av-icons.js'; +import '@polymer/iron-icons/hardware-icons.js'; +import '@polymer/iron-icons/communication-icons.js'; + +@Component({ + tag: 'oae-newsfeed-groups', + styleUrl: 'oae-newsfeed-groups.scss', +}) + +export class NewsFeed { + render() { + return ( +
+
+ + + +
+
+ ); + } +} diff --git a/src/components/oae-newsfeed/oae-newsfeed.scss b/src/components/oae-newsfeed/oae-newsfeed.scss index b9050d3..41743ea 100644 --- a/src/components/oae-newsfeed/oae-newsfeed.scss +++ b/src/components/oae-newsfeed/oae-newsfeed.scss @@ -1,4 +1,3 @@ - .box { box-shadow: none; background-color: white; @@ -33,7 +32,7 @@ // Avatar Info p.user-info { - margin-bottom: 0; + margin-bottom: 0 !important; } .content p { @@ -45,6 +44,13 @@ p.user-info { padding: 10px; } +.news-feed-file { + margin-top: 20px; + margin-left: 60px; + margin-right: 65px; + width: auto; +} + .news-feed-top { margin-bottom: 0; } @@ -75,6 +81,16 @@ p.user-info { } } +.feed-user-link { + text-decoration: underline; + color: #2962ff; + font-weight: bold; + &:hover { + background-color: #f5f7ff; + color: #2962ff; + } +} + .avatar-news-feed { width: 50px; height: 50px; @@ -137,6 +153,12 @@ p.user-info { margin-left: 5px; } +.icon-feed-file { + color: #272b2e; + margin-left: 5px; + transform: rotate(90deg); +} + .news-pin { margin-right: 15px; margin-top: -50px; diff --git a/src/components/oae-newsfeed/oae-newsfeed.tsx b/src/components/oae-newsfeed/oae-newsfeed.tsx index 7f2ca61..26991f7 100644 --- a/src/components/oae-newsfeed/oae-newsfeed.tsx +++ b/src/components/oae-newsfeed/oae-newsfeed.tsx @@ -21,18 +21,18 @@ export class NewsFeed {
- +

- 23 March 2017 + 29 March 2021

@@ -53,7 +53,12 @@ export class NewsFeed {

Here is the briefing for that group assignment we talked about.

- + +
+ internship-report.pdf + + +