diff --git a/assets/GitHub-Mark-64px.png b/assets/GitHub-Mark-64px.png new file mode 100644 index 000000000..182a1a3f7 Binary files /dev/null and b/assets/GitHub-Mark-64px.png differ diff --git a/assets/GitHub-Mark-Light-64px.png b/assets/GitHub-Mark-Light-64px.png new file mode 100644 index 000000000..73db1f61f Binary files /dev/null and b/assets/GitHub-Mark-Light-64px.png differ diff --git a/assets/general-app-page.css b/assets/general-app-page.css index 43008d6f4..e4bbbc756 100644 --- a/assets/general-app-page.css +++ b/assets/general-app-page.css @@ -21,8 +21,26 @@ float: left; padding: 10px; padding-bottom: 0px; + transition-duration:500ms; +} + +#app-page-header > a > img:hover { + filter:brightness(2.00); } #app-page-header h2 { font-size: 34pt; + display: inline-block; +} + +#app-page-header #gh-link > img { + height: 50px; + float:right; + margin-top: 15px; + margin-right: 10px; + transition-duration:500ms; +} + +#app-page-header #gh-link > img:hover { + -webkit-filter:invert(100%); } diff --git a/index.py b/index.py index 5ae65e75f..c348f26fc 100644 --- a/index.py +++ b/index.py @@ -53,7 +53,9 @@ ) -def demoAppImgSrc(name): +def demo_app_img_src(name): + ''' Returns the base-64 encoded image corresponding + to the specified app.''' pic_fname = './tests/dash/images/pic_{}.png'.format( name.replace('app_', '') ) @@ -67,11 +69,14 @@ def demoAppImgSrc(name): open('./assets/dashbio_logo.png', 'rb').read()).decode()) -def demoAppName(name): +def demo_app_name(name): + ''' Returns a capitalized title for the app, with "Dash" + in front.''' return 'Dash ' + name.replace('app_', '').replace('_', ' ').title() -def demoAppDesc(name): +def demo_app_desc(name): + ''' Returns the content of the description specified in the app. ''' desc = '' try: desc = apps[name].description() @@ -80,13 +85,19 @@ def demoAppDesc(name): return desc -def demoAppHeaderColors(name): +def demo_app_header_colors(name): + ''' Returns the colors of the header specified in the app, if any. ''' try: - return apps[name].headerColors() + return apps[name].header_colors() except AttributeError: return {} +def demo_app_github_url(name): + ''' Returns the link with the code for the demo app. ''' + return name + + @app.callback(Output("container", "children"), [Input("location", "pathname")]) def display_app(pathname): if pathname == '/{}'.format(DASH_APP_NAME) \ @@ -99,14 +110,14 @@ def display_app(pathname): dcc.Link( children=[ html.Img(className='gallery-app-img', - src=demoAppImgSrc(name)), + src=demo_app_img_src(name)), html.Div(className='gallery-app-info', children=[ html.Div(className='gallery-app-name', children=[ - demoAppName(name) + demo_app_name(name) ]), html.Div(className='gallery-app-desc', children=[ - demoAppDesc(name) - ]), + demo_app_desc(name) + ]) ]) ], href="/{}/{}".format( @@ -126,8 +137,9 @@ def display_app(pathname): return html.Div(id="waitfor", children=app_page_layout( apps[app_name].layout(), - app_title=demoAppName(app_name), - **demoAppHeaderColors(app_name) + app_title=demo_app_name(app_name), + app_github_url=demo_app_github_url(app_name), + **demo_app_header_colors(app_name) )) else: return """ diff --git a/tests/dash/utils/app_wrapper.py b/tests/dash/utils/app_wrapper.py index 8b7513827..1d3cfb646 100644 --- a/tests/dash/utils/app_wrapper.py +++ b/tests/dash/utils/app_wrapper.py @@ -5,6 +5,8 @@ def app_page_layout(page_layout, app_title="Dash Bio App", + app_github_url="", + light_logo=True, bg_color="#506784", font_color="#F3F6FA"): return html.Div( @@ -27,6 +29,21 @@ def app_page_layout(page_layout, ), html.H2( app_title + ), + html.A( + id='gh-link', + children=[ + html.Img( + src='data:image/png;base64,{}'.format( + base64.b64encode(open( + './assets/GitHub-Mark-{}64px.png'.format( + 'Light-' if light_logo else ''), + 'rb').read() + ).decode() + ) + ) + ], + href="http://github.com/plotly/dash-bio/blob/master/tests/dash/app_{}.py".format(app_github_url) ) ], style={