Skip to content
Snippets Groups Projects
Unverified Commit 03db057c authored by Scott Berg's avatar Scott Berg Committed by GitHub
Browse files

Merge pull request #1 from saberg3/feature/dynamic-username 

Populate name and initial dynamically, add slot for custom navigation item
parents 8450c2ab 5907e7f8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 6
− 2
View file @ 03db057c
This component is currently a work in progress, right now it does work as a stand alone component and in tandem with the myuw-app-bar component. This component is currently a work in progress, right now it does work as a stand alone component and in tandem with the myuw-app-bar component.
Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint. I am also looking into ways for users to include custom link items using slots, but getting everything to style properly is proving difficult. Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint.
## Testing ## Testing
...@@ -11,4 +11,8 @@ You can view a test of this component being used with the myuw-app-bar by openin ...@@ -11,4 +11,8 @@ You can view a test of this component being used with the myuw-app-bar by openin
- **Login URL (login-url):** The URL to redirect users to on login - **Login URL (login-url):** The URL to redirect users to on login
- **Logout URL (logout-url):** The Logout URL to redirect users to on logout - **Logout URL (logout-url):** The Logout URL to redirect users to on logout
- **Session Endpoint (session-endpoint):** The endpoint URL for session info - **Session Endpoint (session-endpoint):** The endpoint URL for session info
\ No newline at end of file
#### Slots
- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
\ No newline at end of file
index.html
+ 4
− 11
View file @ 03db057c
<html> <html>
<head> <head>
<style> <style>
*{ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
nav {
text-align: right;
background: #c5050c;
height: 50px;
width: calc(100% - 10px);
max-width: 100%;
padding-top: 10px;
padding-right: 10px;
}
</style> </style>
<script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1"></script> <script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1"></script>
<link rel="import" href="myuw-profile.html"> <link rel="import" href="myuw-profile.html">
</head> </head>
<body> <body>
<myuw-app-bar appName="Bucky Backup"> <myuw-app-bar>
<myuw-profile <myuw-profile
slot="myuw-profile" slot="myuw-profile"
login-url="https://wisc.edu/" login-url="https://wisc.edu/"
logout-url="https://wisc.edu/" logout-url="https://wisc.edu/"
session-endpoint="https://my.wisc.edu/portal/web/session.json" session-endpoint="https://my.wisc.edu/portal/web/session.json"
> >
<a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
<a href="https://wisc.edu" slot="nav-item">STAR</a>
</myuw-profile> </myuw-profile>
</myuw-app-bar> </myuw-app-bar>
</body> </body>
......
myuw-profile.css
+ 28
− 21
View file @ 03db057c
...@@ -21,6 +21,18 @@ ...@@ -21,6 +21,18 @@
height: 40px; height: 40px;
background: teal; background: teal;
border-radius: 100%; border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#myuw-profile-circle-initial {
padding: 0;
margin: 0;
font-weight: 100;
user-select: none;
text-transform: capitalize;
} }
#myuw-profile-wrapper { #myuw-profile-wrapper {
...@@ -47,7 +59,7 @@ ...@@ -47,7 +59,7 @@
transform-origin: top right; transform-origin: top right;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
transition: all .25s ease; transition: all .25s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75); -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
...@@ -64,41 +76,36 @@ ...@@ -64,41 +76,36 @@
margin: 0; margin: 0;
} }
#myuw-profile-nav.visible a,
#myuw-profile-nav.visible p {
opacity: 1;
}
#myuw-profile-nav a, #myuw-profile-nav a,
#myuw-profile-nav p { #myuw-profile-nav p,
opacity: 0; ::slotted(a),
::slotted(p){
transition: all .3s ease; transition: all .3s ease;
position: relative; position: relative;
display: block; display: block;
padding: 14px 16px; padding: 14px 16px;
/* transition: background-color .15s ease; */
color: black; color: black;
text-decoration: none; text-decoration: none;
background-color: #f9f9f9;
border-bottom: solid 1px #e5e5e5;
user-select: none;
} }
#myuw-profile-nav a:first-child, #myuw-profile-nav a:first-child,
#myuw-profile-nav p:first-child { #myuw-profile-nav p:first-child {
padding: 14px 16px; padding: 14px 16px;
font-weight: bold; font-weight: bold;
background-color: white;
} }
#myuw-profile-wrapper a:hover, #myuw-profile-nav a:first-child:hover,
#myuw-profile-wrapper p:hover { #myuw-profile-nav p:first-child:hover {
background-color: rgba(158,158,158,0.2); background-color: white;
} }
:global(#myuw-profile-nav li a) { #myuw-profile-wrapper a:hover,
transition: all .3s ease; #myuw-profile-wrapper p:hover,
position: relative; ::slotted(a:hover),
display: block; ::slotted(p:hover) {
padding: 14px 16px; background-color: rgba(158,158,158,0.2);
background-color: teal;
/* transition: background-color .15s ease; */
color: black;
text-decoration: none;
} }
\ No newline at end of file
myuw-profile.html
+ 19
− 6
View file @ 03db057c
...@@ -5,13 +5,15 @@ ...@@ -5,13 +5,15 @@
<a href="#" id="myuw-profile-login">Login</a> <a href="#" id="myuw-profile-login">Login</a>
<div id="myuw-profile-wrapper"> <div id="myuw-profile-wrapper">
<div id="myuw-profile-circle"></div> <div id="myuw-profile-circle">
<p id="myuw-profile-circle-initial">B</p>
</div>
<div id="myuw-profile-nav"> <div id="myuw-profile-nav">
<p>Bucky</p> <p id="myuw-profile-nav-user">Bucky</p>
<slot name="list-item"></slot> <slot name="nav-item"></slot>
<a href="#">Settings</a> <a href="#">Settings</a>
<a href="#">Logout</a> <a id="myuw-profile-logout" href="#">Logout</a>
</div> </div>
</div> </div>
...@@ -92,14 +94,25 @@ class MyUWProfile extends HTMLElement { ...@@ -92,14 +94,25 @@ class MyUWProfile extends HTMLElement {
// Set the Login URL // Set the Login URL
this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']); this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);
// Set the logout URL
this.shadowRoot.getElementById('myuw-profile-logout').setAttribute('href', this['logout-url']);
// Show / hide elements based on shib state // Show / hide elements based on shib state
if(this.user){ if(this.user){
// Hide login button
this.shadowRoot.getElementById('myuw-profile-login').classList.add('hidden'); this.shadowRoot.getElementById('myuw-profile-login').classList.add('hidden');
// Show Profile circle
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.remove('hidden'); this.shadowRoot.getElementById('myuw-profile-wrapper').classList.remove('hidden');
// Add user's name to first menu item
this.shadowRoot.getElementById('myuw-profile-nav-user').innerHTML = this.user.firstName;
// Change the letter in the profile circle
this.shadowRoot.getElementById('myuw-profile-circle-initial').innerHTML = this.user.firstName.substring(0,1);
} else { } else {
// Show Login Button
this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden'); this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden');
// Hide profile Circle
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.add('hidden'); this.shadowRoot.getElementById('myuw-profile-wrapper').classList.add('hidden');
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment