LT-397: Check that everything works when internet is disconnected; Adding Google Fonts Local Copies

LesionTracker/client/head.html

@@ -14,7 +14,4 @@
 
     <!-- Make SVG work on IE -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>

OHIFViewer/client/head.html

@@ -8,7 +8,4 @@
     <meta name="MobileOptimized" content="320">
     <meta name="HandheldFriendly" content="True">
     <meta name="apple-mobile-web-app-capable" content="yes">
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>

Packages/ohif-viewerbase/client/components/basic/layout/layout.styl

@@ -0,0 +1,269 @@
+/* 
+  Fonts files:
+  - Used fonts: 
+    - Sanchez and Roboto from Google Font
+  - woff2 and woff (to support IE11) files
+  - latin and latin extended subsets
+*/
+
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Thin-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Thin-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Thin-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Thin-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Light-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Light-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Light-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Light-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Regular-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Regular-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Regular-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Regular-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Medium-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Medium-latin-ext.woff') format('woff');;
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Medium-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Medium-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Bold-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Bold-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Bold-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Bold-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Black-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Black-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Black-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Black-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-ThinItalic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-ThinItalic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-ThinItalic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-ThinItalic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-LightItalic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-LightItalic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-LightItalic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-LightItalic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Italic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Italic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Italic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-Italic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-MediumItalic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-MediumItalic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-MediumItalic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-MediumItalic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BoldItalic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BoldItalic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BoldItalic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BoldItalic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BlackItalic-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BlackItalic-latin-ext.woff') format('woff');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BlackItalic-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Roboto-BlackItalic-latin.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Sanchez';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Sanchez'), local('Sanchez-Regular'),
+    url('/packages/ohif_viewerbase/assets/fonts/Sanchez-Regular-latin-ext.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Sanchez-Regular-latin-ext.woff') format('woff')
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Sanchez';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Sanchez'), local('Sanchez-Regular'),
+    url('/packages/ohif_viewerbase/assets/fonts/Sanchez-Regular-latin.woff2') format('woff2'),
+    url('/packages/ohif_viewerbase/assets/fonts/Sanchez-Regular-latin.woff') format('woff')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}

Packages/ohif-viewerbase/package.js

@@ -20,7 +20,64 @@ Package.onUse(function(api) {
     api.use('ohif:core');
     api.use('ohif:cornerstone');
 
-    api.addAssets('assets/icons.svg', 'client');
+    const assets = [
+        'assets/icons.svg',
+        'assets/fonts/Roboto-Black-latin-ext.woff',
+        'assets/fonts/Roboto-Black-latin-ext.woff2',
+        'assets/fonts/Roboto-Black-latin.woff',
+        'assets/fonts/Roboto-Black-latin.woff2',
+        'assets/fonts/Roboto-BlackItalic-latin-ext.woff',
+        'assets/fonts/Roboto-BlackItalic-latin-ext.woff2',
+        'assets/fonts/Roboto-BlackItalic-latin.woff',
+        'assets/fonts/Roboto-BlackItalic-latin.woff2',
+        'assets/fonts/Roboto-Bold-latin-ext.woff',
+        'assets/fonts/Roboto-Bold-latin-ext.woff2',
+        'assets/fonts/Roboto-Bold-latin.woff',
+        'assets/fonts/Roboto-Bold-latin.woff2',
+        'assets/fonts/Roboto-BoldItalic-latin-ext.woff',
+        'assets/fonts/Roboto-BoldItalic-latin-ext.woff2',
+        'assets/fonts/Roboto-BoldItalic-latin.woff',
+        'assets/fonts/Roboto-BoldItalic-latin.woff2',
+        'assets/fonts/Roboto-Italic-latin-ext.woff',
+        'assets/fonts/Roboto-Italic-latin-ext.woff2',
+        'assets/fonts/Roboto-Italic-latin.woff',
+        'assets/fonts/Roboto-Italic-latin.woff2',
+        'assets/fonts/Roboto-Light-latin-ext.woff',
+        'assets/fonts/Roboto-Light-latin-ext.woff2',
+        'assets/fonts/Roboto-Light-latin.woff',
+        'assets/fonts/Roboto-Light-latin.woff2',
+        'assets/fonts/Roboto-LightItalic-latin-ext.woff',
+        'assets/fonts/Roboto-LightItalic-latin-ext.woff2',
+        'assets/fonts/Roboto-LightItalic-latin.woff',
+        'assets/fonts/Roboto-LightItalic-latin.woff2',
+        'assets/fonts/Roboto-Medium-latin-ext.woff',
+        'assets/fonts/Roboto-Medium-latin-ext.woff2',
+        'assets/fonts/Roboto-Medium-latin.woff',
+        'assets/fonts/Roboto-Medium-latin.woff2',
+        'assets/fonts/Roboto-MediumItalic-latin-ext.woff',
+        'assets/fonts/Roboto-MediumItalic-latin-ext.woff2',
+        'assets/fonts/Roboto-MediumItalic-latin.woff',
+        'assets/fonts/Roboto-MediumItalic-latin.woff2',
+        'assets/fonts/Roboto-Regular-latin-ext.woff',
+        'assets/fonts/Roboto-Regular-latin-ext.woff2',
+        'assets/fonts/Roboto-Regular-latin.woff',
+        'assets/fonts/Roboto-Regular-latin.woff2',
+        'assets/fonts/Roboto-Thin-latin-ext.woff',
+        'assets/fonts/Roboto-Thin-latin-ext.woff2',
+        'assets/fonts/Roboto-Thin-latin.woff',
+        'assets/fonts/Roboto-Thin-latin.woff2',
+        'assets/fonts/Roboto-ThinItalic-latin-ext.woff',
+        'assets/fonts/Roboto-ThinItalic-latin-ext.woff2',
+        'assets/fonts/Roboto-ThinItalic-latin.woff',
+        'assets/fonts/Roboto-ThinItalic-latin.woff2',
+        'assets/fonts/Sanchez-Regular-latin-ext.woff',
+        'assets/fonts/Sanchez-Regular-latin-ext.woff2',
+        'assets/fonts/Sanchez-Regular-latin.woff',
+        'assets/fonts/Sanchez-Regular-latin.woff2'
+    ];
+
+    api.addAssets(assets, 'client');
+
 
     // TODO: Use NPM depends for these
     api.addFiles('client/compatibility/jquery.hotkeys.js', 'client', {
@@ -38,6 +95,7 @@ Package.onUse(function(api) {
 
     // Basic components
     api.addFiles('client/components/basic/layout/layout.html', 'client');
+    api.addFiles('client/components/basic/layout/layout.styl', 'client');
     api.addFiles('client/components/basic/loadingText/loadingText.html', 'client');
     api.addFiles('client/components/basic/loadingText/loadingText.styl', 'client');
 

StandaloneViewer/StandaloneViewer/client/head.html

@@ -8,7 +8,4 @@
     <meta name="MobileOptimized" content="320">
     <meta name="HandheldFriendly" content="True">
     <meta name="apple-mobile-web-app-capable" content="yes">
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>