Skip to content
GitLab
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Commits on Source (2)
(feat) add social icons and text to footer
· 05827b04
Juan Manuel Solaro
authored
Aug 06, 2019
05827b04
Merge branch 'footer-social-icons-and-text' into 'epic/minds-pro'
· 056abd51
Emiliano Balbuena
authored
Aug 06, 2019
(feat) add social icons and text to footer See merge request
!478
056abd51
Hide whitespace changes
Inline
Side-by-side
src/app/modules/pro/channel/footer/footer.component.html
View file @
056abd51
<span>
{{footerText}}
</span>
<div
class=
"mdl-color-text--blue-grey-600"
>
<span
*ngFor=
"let profile of footerSocialProfiles"
>
<a
*ngIf=
"profile.key && profile.value"
[href]=
"getSocialProfileURL(profile.value)"
rel=
"noopener noreferrer"
target=
"_blank"
><i
[ngClass]=
"[ getSocialProfileIconClass(profile) ]"
></i></a>
</span>
</div>
<a
[href]=
"link.href"
*ngFor=
"let link of footerLinks"
>
{{link.title}}
</a>
src/app/modules/pro/channel/footer/footer.component.ts
View file @
056abd51
import
{
Component
}
from
'
@angular/core
'
;
import
{
ProChannelService
}
from
"
../channel.service
"
;
export
interface
SocialProfileMeta
{
key
:
string
;
label
:
string
;
link
:
string
;
icon
:
string
;
customIcon
?:
boolean
;
domain
:
string
;
}
@
Component
({
selector
:
'
m-pro--channel-footer
'
,
templateUrl
:
'
footer.component.html
'
...
...
@@ -8,10 +19,257 @@ import { ProChannelService } from "../channel.service";
export
class
ProChannelFooterComponent
{
private
socialProfileMeta
:
SocialProfileMeta
[]
=
[
{
key
:
'
facebook
'
,
label
:
'
Facebook
'
,
link
:
'
https://www.facebook.com/:value
'
,
icon
:
'
facebook-official
'
,
domain
:
'
facebook.com
'
,
},
{
key
:
'
github
'
,
label
:
'
Github
'
,
link
:
'
https://github.com/:value
'
,
icon
:
'
github
'
,
domain
:
'
github.com
'
,
},
{
key
:
'
twitch
'
,
label
:
'
Twitch
'
,
link
:
'
https://www.twitch.tv/:value
'
,
icon
:
'
twitch
'
,
domain
:
'
twitch.tv
'
,
},
{
key
:
'
linkedin
'
,
label
:
'
LinkedIn
'
,
link
:
'
https://linkedin.com/in/:value
'
,
icon
:
'
linkedin
'
,
domain
:
'
linkedin.com
'
,
},
{
key
:
'
youtube_channel
'
,
label
:
'
YouTube Channel
'
,
link
:
'
https://www.youtube.com/channel/:value
'
,
icon
:
'
youtube
'
,
domain
:
'
youtube.com
'
,
},
{
key
:
'
minds
'
,
label
:
'
Minds
'
,
link
:
'
https://www.minds.com/:value
'
,
icon
:
'
minds
'
,
customIcon
:
true
,
domain
:
'
minds.com
'
,
},
{
key
:
'
reddit
'
,
label
:
'
Reddit
'
,
link
:
'
https://www.reddit.com/u/:value
'
,
icon
:
'
reddit
'
,
domain
:
'
reddit.com
'
,
},
{
key
:
'
soundcloud
'
,
label
:
'
SoundCloud
'
,
link
:
'
https://soundcloud.com/:value
'
,
icon
:
'
soundcloud
'
,
domain
:
'
soundcloud.com
'
},
{
key
:
'
tumblr
'
,
label
:
'
Tumblr Site
'
,
link
:
'
https://:value.tumblr.com
'
,
icon
:
'
tumblr
'
,
domain
:
'
tumblr.com
'
,
},
{
key
:
'
twitter
'
,
label
:
'
Twitter
'
,
link
:
'
https://twitter.com/:value
'
,
icon
:
'
twitter
'
,
domain
:
'
twitter.com
'
,
},
{
key
:
'
github
'
,
label
:
'
Github
'
,
link
:
'
https://github.com/:value
'
,
icon
:
'
github
'
,
domain
:
'
github.com
'
,
},
{
key
:
'
instagram
'
,
label
:
'
Instagram
'
,
link
:
'
https://www.instagram.com/:value
'
,
icon
:
'
instagram
'
,
domain
:
'
instagram.com
'
},
{
key
:
'
wikipedia_user
'
,
label
:
'
Wikipedia User
'
,
link
:
'
https://wikipedia.org/wiki/:value
'
,
icon
:
'
wikipedia-w
'
,
domain
:
'
wikipedia.com
'
},
{
key
:
'
imdb_user
'
,
label
:
'
IMDb User
'
,
link
:
'
https://www.imdb.com/name/:value
'
,
icon
:
'
imdb
'
,
domain
:
'
imdb.com
'
,
},
{
key
:
'
steam
'
,
label
:
'
Steam Profile
'
,
link
:
'
https://steamcommunity.com/id/:value/
'
,
icon
:
'
steam
'
,
domain
:
'
steamcommunity.com
'
,
},
{
key
:
'
deviantart
'
,
label
:
'
Deviantart User
'
,
link
:
'
https://:value.deviantart.com/
'
,
icon
:
'
deviantart
'
,
domain
:
'
deviantart.com
'
,
},
{
key
:
'
discord
'
,
label
:
'
Discord Server
'
,
link
:
'
https://discord.me/:value
'
,
icon
:
'
discord
'
,
domain
:
'
discord.me
'
,
},
{
key
:
'
flickr
'
,
label
:
'
Flickr Profile
'
,
link
:
'
https://www.flickr.com/photos/:value/
'
,
icon
:
'
flickr
'
,
domain
:
'
flickr.com
'
,
},
{
key
:
'
flipboard
'
,
label
:
'
Flipboard Profile
'
,
link
:
'
https://www.flipboard.com/:value
'
,
icon
:
'
flipboard
'
,
domain
:
'
flipboard.com
'
,
},
{
key
:
'
gitlab
'
,
label
:
'
Gitlab Profile
'
,
link
:
'
https://www.gitlab.com/:value
'
,
icon
:
'
gitlab
'
,
domain
:
'
gitlab.com
'
,
},
{
key
:
'
gitter
'
,
label
:
'
Gitter Profile
'
,
link
:
'
https://gitter.im/:value
'
,
icon
:
'
gitter
'
,
domain
:
'
gitter.im
'
,
},
{
key
:
'
goodreads
'
,
label
:
'
Goodreads Profile
'
,
link
:
'
https://www.goodreads.com/user/show/:value
'
,
icon
:
'
goodreads
'
,
domain
:
'
goodreads.com
'
,
},
{
key
:
'
google_plus
'
,
label
:
'
Google Plus Profile
'
,
link
:
'
https://plus.google.com/:value
'
,
icon
:
'
google-plus
'
,
domain
:
'
google.com
'
,
},
{
key
:
'
mastodon
'
,
label
:
'
Mastodon Profile
'
,
link
:
'
https://mastodon.social/:value
'
,
icon
:
'
mastodon
'
,
domain
:
'
mastodon.social
'
,
},
{
key
:
'
medium
'
,
label
:
'
Medium Profile
'
,
link
:
'
https://medium.com/:value
'
,
icon
:
'
medium-m
'
,
domain
:
'
medium.com
'
,
},
{
key
:
'
patreon
'
,
label
:
'
Patreon Profile
'
,
link
:
'
https://www.patreon.com/:value
'
,
icon
:
'
patreon
'
,
domain
:
'
patreon.com
'
,
},
{
key
:
'
slack
'
,
label
:
'
Slack Channel
'
,
link
:
'
https://:value.slack.com
'
,
icon
:
'
slack
'
,
domain
:
'
slack.com
'
,
},
{
key
:
'
other
'
,
label
:
'
Other
'
,
link
:
''
,
icon
:
'
link
'
,
domain
:
''
}
];
get
footerLinks
()
{
return
this
.
channelService
.
currentChannel
.
pro_settings
.
footer_links
;
}
get
footerText
()
{
return
this
.
channelService
.
currentChannel
.
pro_settings
.
footer_text
;
}
get
footerSocialProfiles
()
{
return
this
.
channelService
.
currentChannel
.
social_profiles
;
}
getSocialProfileURL
(
url
:
string
)
{
if
(
url
.
includes
(
'
http://
'
)
||
url
.
includes
(
'
https://
'
))
{
return
url
;
}
else
{
return
'
http://
'
+
url
;
}
}
getSocialProfileIconClass
({
key
=
''
})
{
let
meta
=
this
.
getSocialProfileMeta
(
key
),
domClass
;
if
(
meta
.
customIcon
)
{
domClass
=
`m-custom-icon m-custom-icon-
${
meta
.
icon
}
`
;
}
else
{
domClass
=
`fa fa-fw fa-
${
meta
.
icon
}
`
;
}
return
domClass
;
}
private
getSocialProfileMeta
(
key
:
string
):
SocialProfileMeta
{
let
defaultMeta
:
SocialProfileMeta
=
{
key
:
''
,
label
:
''
,
link
:
'
#
'
,
icon
:
'
link
'
,
domain
:
''
};
if
(
!
key
)
{
return
defaultMeta
;
}
for
(
let
i
in
this
.
socialProfileMeta
)
{
if
(
this
.
socialProfileMeta
[
i
].
key
===
key
)
{
return
this
.
socialProfileMeta
[
i
];
}
}
return
defaultMeta
;
}
constructor
(
private
channelService
:
ProChannelService
,
)
{
...
...