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

fix: 🎸 switch ohif logo from text + font to SVG (#1021)

Browse Source 
currently we are using font + text, not it was changed to use svg
instead

Closes: 723
This commit is contained in:
Igor Octaviano 2019-10-09 23:15:53 -03:00 committed by Danny Brown
parent cb2088daf7
commit e7de8be2d8
12 changed files with 145 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/ui/src/__docs__/getting-started.mdx
View File

@ -33,8 +33,8 @@ as easy as possible. You will, however, need to include either the default font
or the font you set for your theme: or the font you set for your theme:
```js ```js
// Google Fonts, Sanchez & Roboto // Google Fonts, Roboto
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap'; 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap';
``` ```
`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a `@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a

39
platform/ui/src/__docs__/index.html
View File

@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ lang }}"> <html lang="{{ lang }}">
<head>
<meta charset="UTF-8">
<meta name="description" content="{{ description }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title }}</title> <head>
<meta charset="UTF-8">
<meta name="description" content="{{ description }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS --> <title>{{ title }}</title>
<link rel="stylesheet" href="/public/docz.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap">
<style> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/public/docz.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
<style>
/* "Tide" theme */ /* "Tide" theme */
/* TODO: /* TODO:
- Convert the other themes to CSS Variables - Convert the other themes to CSS Variables
@ -40,7 +41,7 @@
--table-text-primary-color: #ffffff; --table-text-primary-color: #ffffff;
--table-text-secondary-color: #91b9cd; --table-text-secondary-color: #91b9cd;
--large-numbers-color:#6FBDE2; --large-numbers-color: #6FBDE2;
--state-error: #FFCCCC; --state-error: #FFCCCC;
--state-error-border: #FFCCCC; --state-error-border: #FFCCCC;
@ -70,11 +71,13 @@
body { body {
font-family: 'Roboto', sans-serif !important; font-family: 'Roboto', sans-serif !important;
} }
</style> </style>
{{ head }} {{ head }}
</head> </head>
<body>
<div id="root" /> <body>
{{ footer }} <div id="root" />
</body> {{ footer }}
</body>
</html> </html>

2
platform/ui/src/elements/Icon/getIcon.js
View File

@ -53,6 +53,7 @@ import measureTargetUn from './icons/measure-target-un.svg';
import measureTemp from './icons/measure-temp.svg'; import measureTemp from './icons/measure-temp.svg';
import objectGroup from './icons/object-group.svg'; import objectGroup from './icons/object-group.svg';
import ohifLogo from './icons/ohif-logo.svg'; import ohifLogo from './icons/ohif-logo.svg';
import ohifTextLogo from './icons/ohif-text-logo.svg';
import oval from './icons/oval.svg'; import oval from './icons/oval.svg';
import palette from './icons/palette.svg'; import palette from './icons/palette.svg';
import play from './icons/play.svg'; import play from './icons/play.svg';
@ -120,6 +121,7 @@ const ICONS = {
'inline-edit': inlineEdit, 'inline-edit': inlineEdit,
list, list,
'ohif-logo': ohifLogo, 'ohif-logo': ohifLogo,
'ohif-text-logo': ohifTextLogo,
lock, lock,
play, play,
database, database,

3
platform/ui/src/elements/Icon/icons/ohif-text-logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

2
platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

50
platform/viewer/public/html-templates/index.html
View File

@ -1,41 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" /> <head>
<!-- Built with: https://polyfill.io/v3/url-builder/ --> <meta charset="utf-8" />
<!-- Targets IE11 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script> <meta name="theme-color" content="#000000" />
<script
type="text/javascript"
src="<%= PUBLIC_URL %>app-config.js"
></script>
<title>OHIF Viewer</title> <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
<!-- Built with: https://polyfill.io/v3/url-builder/ -->
<!-- Targets IE11 -->
<script
src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
<script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
<!-- WEB FONTS --> <title>OHIF Viewer</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap"
rel="stylesheet"
/>
<!-- EXTENSIONS --> <!-- WEB FONTS -->
<!-- <script type="text/javascript" src="path/to/some-extension.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
<!-- EXTENSIONS -->
<!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
<script> <script>
window.config.extensions = [SomeExtension]; window.config.extensions = [SomeExtension];
</script> --> </script> -->
</head> </head>
<body> <body>
<noscript> You need to enable JavaScript to run this app. </noscript> <noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
<div id="root"></div>
</body>
</html> </html>

73
platform/viewer/public/html-templates/rollbar.html
View File

File diff suppressed because one or more lines are too long

104
platform/viewer/public/html-templates/script-tag.html
View File

@ -1,67 +1,59 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta <head>
name="description" <meta charset="utf-8" />
content="Open Health Imaging Foundation DICOM Viewer"
/>
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<meta http-equiv="cleartype" content="on" />
<meta name="MobileOptimized" content="320" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script> <meta name="description" content="Open Health Imaging Foundation DICOM Viewer" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta http-equiv="cleartype" content="on" />
<meta name="MobileOptimized" content="320" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- WEB FONTS --> <script
<link src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
href="https://fonts.googleapis.com/css?family=Sanchez"
rel="stylesheet"
/>
<title>OHIF Standalone Viewer</title> <title>OHIF Standalone Viewer</title>
</head> </head>
<body> <body>
<noscript> You need to enable JavaScript to run this app. </noscript> <noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div> <div id="root"></div>
<script src="/index.umd.js" crossorigin></script> <script src="/index.umd.js" crossorigin></script>
<script> <script>
var containerId = 'root'; var containerId = 'root';
var componentRenderedOrUpdatedCallback = function() { var componentRenderedOrUpdatedCallback = function () {
console.log('OHIF Viewer rendered/updated'); console.log('OHIF Viewer rendered/updated');
}; };
window.OHIFViewer.installViewer( window.OHIFViewer.installViewer(
{ {
// routerBasename: '/', // routerBasename: '/',
servers: { servers: {
dicomWeb: [ dicomWeb: [
{ {
name: 'DCM4CHEE', name: 'DCM4CHEE',
wadoUriRoot: wadoUriRoot:
'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado', 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
qidoRoot: qidoRoot:
'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
wadoRoot: wadoRoot:
'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
qidoSupportsIncludeField: true, qidoSupportsIncludeField: true,
imageRendering: 'wadors', imageRendering: 'wadors',
thumbnailRendering: 'wadors', thumbnailRendering: 'wadors',
}, },
], ],
},
}, },
containerId, },
componentRenderedOrUpdatedCallback containerId,
); componentRenderedOrUpdatedCallback
</script> );
</body> </script>
</body>
</html> </html>

16
platform/viewer/src/components/Header/Header.css
View File

@ -4,7 +4,7 @@
} }
.entry-header.header-big { .entry-header.header-big {
background: rgba(21,25,30,0.7); background: rgba(21, 25, 30, 0.7);
padding: 10px var(--study-list-padding); padding: 10px var(--study-list-padding);
height: auto; height: auto;
display: inline-block; display: inline-block;
@ -32,7 +32,6 @@
padding: 25px 0; padding: 25px 0;
} }
.header-logo-image { .header-logo-image {
fill: transparent; fill: transparent;
height: 100%; height: 100%;
@ -47,18 +46,9 @@
height: 50px; height: 50px;
} }
.header-logo-text {
display: inline-block;
font-family: var(--logo-font-family);
font-size: 14px;
font-weight: var(--logo-font-weight);
color: var(--text-primary-color);
line-height: 30px;
}
.entry-header.header-big .header-logo-text { .entry-header.header-big .header-logo-text {
font-size: 30px; width: 474px;
line-height: 36px; height: auto;
} }
.header-btn { .header-btn {

12
platform/viewer/src/components/OHIFLogo/OHIFLogo.css
View File

@ -2,23 +2,19 @@
height: 30px; height: 30px;
text-decoration: none; text-decoration: none;
text-decoration-color: none; text-decoration-color: none;
display: flex; display: flex;
align-items: center;
color: var(--text-primary-color); color: var(--text-primary-color);
font-size: 14px;
font-weight: var(--logo-font-weight);
font-family: var(--logo-font-family);
} }
.header-brand:hover, .header-brand:hover, .header-brand:active, .header-band:visited {
.header-brand:active,
.header-band:visited {
color: var(--text-primary-color); color: var(--text-primary-color);
text-decoration: none; text-decoration: none;
} }
.header-logo-text { .header-logo-text {
line-height: 30px; width: 224px;
height: auto;
margin-left: 8px; margin-left: 8px;
} }

2
platform/viewer/src/components/OHIFLogo/OHIFLogo.js
View File

@ -12,7 +12,7 @@ function OHIFLogo() {
href="http://ohif.org" href="http://ohif.org"
> >
<Icon name="ohif-logo" className="header-logo-image" /> <Icon name="ohif-logo" className="header-logo-image" />
<div className="header-logo-text">Open Health Imaging Foundation</div> <Icon name="ohif-text-logo" className="header-logo-text" />
</a> </a>
); );
} }

10
platform/viewer/src/variables.css
View File

@ -1,4 +1,5 @@
/* Sizes */ /* Sizes */
:root { :root {
--top-bar-height: 40px; --top-bar-height: 40px;
--top-bar-expanded-height: 160px; --top-bar-expanded-height: 160px;
@ -10,14 +11,8 @@
--study-list-padding-medium-screen: 10px; --study-list-padding-medium-screen: 10px;
} }
/* Fonts */
/* Logo font should be SVG so we don't need to load an entire font */
:root {
--logo-font-family: 'Sanchez';
--logo-font-weight: 300; /* Sanchez, 300 does not exist */
}
/* Transitions */ /* Transitions */
:root { :root {
--transition-duration: 0.3s; --transition-duration: 0.3s;
--transition-effect: ease; --transition-effect: ease;
@ -25,6 +20,7 @@
} }
/* Thicknesses */ /* Thicknesses */
:root { :root {
--viewport-border-thickness: 1px; --viewport-border-thickness: 1px;
--ui-border-thickness: 1px; --ui-border-thickness: 1px;