othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-311: Improve Icons in User Menu

Browse Source
This commit is contained in:
Eloízio Salgado 2016-11-09 14:02:19 -02:00 committed by Erik Ziegler
parent 87331b7254
commit 512fed9436
4 changed files with 77 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Packages/ohif-user-management/assets/user-menu-icons.svg Normal file
View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="theme" viewBox="0 0 24 24">
<title>Theme</title>
<path d="M17.484 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM14.484 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM9.516 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM6.516 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM12 3c4.969 0 9 3.609 9 8.016 0 2.766-2.25 4.969-5.016 4.969h-1.734c-0.844 0-1.5 0.656-1.5 1.5 0 0.375 0.141 0.703 0.375 0.984s0.375 0.656 0.375 1.031c0 0.844-0.656 1.5-1.5 1.5-4.969 0-9-4.031-9-9s4.031-9 9-9z"></path>
</symbol>
<symbol id="log" viewBox="0 0 24 24">
<title>Log</title>
<path d="M9.516 14.016c2.484 0 4.5-2.016 4.5-4.5s-2.016-4.5-4.5-4.5-4.5 2.016-4.5 4.5 2.016 4.5 4.5 4.5zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281c-1.125 0.984-2.625 1.547-4.219 1.547-3.609 0-6.516-2.859-6.516-6.469s2.906-6.516 6.516-6.516 6.469 2.906 6.469 6.516c0 1.594-0.563 3.094-1.547 4.219l0.281 0.281h0.797z"></path>
</symbol>
<symbol id="server" viewBox="0 0 24 28">
<title>Server</title>
<path d="M12 12c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 24c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 18c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 0c6.625 0 12 1.797 12 4v2c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2c0-2.203 5.375-4 12-4z"></path>
</symbol>
<symbol id="study-list" viewBox="0 0 24 24">
<title>Study List</title>
<path d="M9 5.016h12v3.984h-12v-3.984zM9 18.984v-3.984h12v3.984h-12zM9 14.016v-4.031h12v4.031h-12zM3.984 9v-3.984h4.031v3.984h-4.031zM3.984 18.984v-3.984h4.031v3.984h-4.031zM3.984 14.016v-4.031h4.031v4.031h-4.031z"></path>
</symbol>
<symbol id="logout" viewBox="0 0 24 28">
<title>Logout</title>
<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
</symbol>
<symbol id="password" viewBox="0 0 18 28">
<title>Password</title>
<path d="M5 12h8v-3c0-2.203-1.797-4-4-4s-4 1.797-4 4v3zM18 13.5v9c0 0.828-0.672 1.5-1.5 1.5h-15c-0.828 0-1.5-0.672-1.5-1.5v-9c0-0.828 0.672-1.5 1.5-1.5h0.5v-3c0-3.844 3.156-7 7-7s7 3.156 7 7v3h0.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

24
Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html
View File

@ -11,37 +11,49 @@
{{#if showStudyListMenu}}
<li>
<a href="studylist" id="studylist">
<i class="fa fa-list-ul"></i> Study List
<svg class="study-list">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#study-list></use>
</svg> Study List
</a>
</li>
{{else}}
<li>
<a href="/audit" id="audit">
<i class="fa fa-list-ul"></i> View Audit Log
<svg class="log">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#log></use>
</svg> View Audit Log
</a>
</li>
{{/if}}
<li role="separator" class="divider"></li>
<li>
<a id="themeSelector">
<i class="fa fa-sliders fa-lg"></i> Themes
<svg class="theme">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#theme></use>
</svg> Themes
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a id="serverInformation">
<i class="fa fa-server fa-lg"></i> Server Information
<svg class="server">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#server></use>
</svg> Server Information
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="changePassword" id="changePassword">
<i class="fa fa-lock"></i> Change Password
<svg class="password">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#password></use>
</svg> Change Password
</a>
</li>
<li>
<a id="logoutButton">
<i class="fa fa-power-off"></i> Logout
<svg class="logout">
<use xlink:href=/packages/ohif_user-management/assets/user-menu-icons.svg#logout></use>
</svg> Logout
</a>
</li>
</ul>

30
Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.styl
View File

@ -1,5 +1,9 @@
@import "{design}/app"
$iconMargin = 5px
$iconWidth = 16px
$iconHeight = 16px
#userAccountMenu
padding: 4px 0
height: 100%
@ -30,3 +34,29 @@
ul.dropdown-menu
li
cursor: pointer
svg
margin-right: $iconMargin
width: $iconWidth
height: $iconHeight
text-align: center
svg
display: inline-block
vertical-align: middle
&.server
width: $iconWidth - 3
height: $iconWidth - 3
margin-right: $iconMargin + 2
margin-left: 1px
&.theme
width: $iconWidth + 2
height: $iconWidth + 2
margin-right: $iconMargin - 2
&.study-list
width: $iconWidth + 2
height: $iconWidth + 2
margin-right: $iconMargin - 2

3
Packages/ohif-user-management/package.js
View File

@ -25,6 +25,9 @@ Package.onUse(function(api) {
api.use('ohif:core');
api.use('ohif:study-list');
// Load icons
api.addAssets('assets/user-menu-icons.svg', 'client');
api.addFiles('both/collections.js', ['client', 'server']);
//api.addFiles('both/schema/reviewers.js', ['client', 'server']);