From eb6f3cf9db0312a5bc667f02d4a4b9fd32b6ecfe Mon Sep 17 00:00:00 2001 From: Peder Bergebakken Sundt Date: Thu, 1 Mar 2018 13:55:50 +0100 Subject: [PATCH] Add fontawesome play-pause-prev-next buttons and minor refactor --- gui.py | 27 ++- res/style.css | 660 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 676 insertions(+), 11 deletions(-) create mode 100644 res/style.css diff --git a/gui.py b/gui.py index 19b74ab..3ceb1ea 100644 --- a/gui.py +++ b/gui.py @@ -24,14 +24,16 @@ class MyApp(App): container.append(gui.Image('/res/logo.jpg', width=512)) #playback controls - playbackContainer = gui.HBox()#; container.append(playbackContainer) - self.playback = Namespace() - for i in ("previous", "play", "next"): - button = gui.Button(i.capitalize(), margin="5px") - setattr(self.playback, i, button) - playbackContainer.append(button) - button.set_on_click_listener(getattr(self,'playback_%s' % i)) + + self.playback.playing = gui.Label("Now playing: None")# (TODO): update this + + self.playback.previous, self.playback.play, self.playback.next \ + = map(lambda x: gui.Button(f'', margin="3px", width="2.8em"), + ("step-backward", "play", "step-forward")) + self.playback.previous.set_on_click_listener(self.playback_previous) + self.playback.play.set_on_click_listener(self.playback_play) + self.playback.next.set_on_click_listener(self.playback_next) self.playback.volume_label = gui.Label("Volume:") self.playback.volume_label.style["font-size"] = "0.8em" @@ -40,16 +42,19 @@ class MyApp(App): self.playback.volume_slider.style["margin-bottom"] = "13px" self.playback.volume_slider.set_oninput_listener(self.change_volume) - self.playback.playing = gui.Label("Now playing: None")# (TODO): update this self.playback.seek_slider = gui.Slider(0, 0, 100, 1, width="85%", height=20, margin='10px') self.playback.seek_slider.set_oninput_listener(self.change_seek) + container.append(self.playback.playing) + + playbackContainer = gui.HBox() + playbackContainer.append(self.playback.previous) + playbackContainer.append(self.playback.play) + playbackContainer.append(self.playback.next) volume_container = gui.VBox() volume_container.append(self.playback.volume_label) volume_container.append(self.playback.volume_slider) playbackContainer.append(volume_container) - - container.append(self.playback.playing) container.append(playbackContainer) container.append(self.playback.seek_slider) @@ -154,6 +159,6 @@ class MyApp(App): #helpers def set_playing(self, is_playing:bool): - self.playback.play.set_text("Pause" if is_playing else "Play") + self.playback.play.set_text('' if is_playing else '') self.playback.seek_slider.set_enabled(is_playing) diff --git a/res/style.css b/res/style.css new file mode 100644 index 0000000..260148d --- /dev/null +++ b/res/style.css @@ -0,0 +1,660 @@ +@charset "UTF-8"; +@import url("https://use.fontawesome.com/releases/v5.0.7/css/all.css"); + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('/res/font.woff2') format('woff2'); +} +textarea:focus, +input[type='checkbox']:focus, +input[type='color']:focus, +input[type='number']:focus, +input[type='text']:focus, +input[type='date']:focus, +select:focus { + border: 0px; + outline: 0px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14); + border-bottom: 1px solid rgba(33, 150, 243, .26); +} +::-moz-selection { + background: rgba(33, 150, 243, .26); + text-shadow: none +} +::selection { + background: rgba(33, 150, 243, .26); + text-shadow: none +} +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle +} +textarea { + resize: vertical +} +a, +a:visited { + text-decoration: underline +} +html { + height: 100%; +} +body { + width: 100%; + margin: 0px; + padding: 0px; + height: 100%; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 100%; +} +*[hidden] { + display: none!important +} +h1, +h2, +h3, +h4, +h5, +h6, +p { + padding: 0 +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400; + line-height: 1.35; + letter-spacing: -.02em; + opacity: .54; + font-size: .6em +} +h1 { + font-size: 400%; + line-height: 1.35; + letter-spacing: -.02em; + margin: 24px 0 +} +h1, +h2 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400 +} +h2 { + font-size: 320%; + line-height: 48px +} +h2, +h3 { + margin: 24px 0 +} +h3 { + font-size: 240%; + line-height: 40px +} +h3, +h4 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400 +} +h4 { + font-size: 170%; + line-height: 32px; + -moz-osx-font-smoothing: grayscale; + margin: 24px 0 16px +} +h5 { + font-size: 140%; + font-weight: 500; + line-height: 1; + letter-spacing: .02em +} +h5, +h6 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + margin: 24px 0 16px +} +h6 { + font-size: 114%; + letter-spacing: .04em +} +h6, +p { + font-weight: 400; + line-height: 24px +} +p { + letter-spacing: 0; + margin: 0 0 16px +} +a { + color: rgba(33, 150, 243, .8); + font-weight: 500 +} +blockquote { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + position: relative; + font-size: 170%; + font-weight: 300; + font-style: italic; + line-height: 1.35; + letter-spacing: .08em +} +blockquote:before { + position: absolute; + left: -.5em; + content: '�' +} +blockquote:after { + content: '�'; + margin-left: -.05em +} +mark { + background-color: #f4ff81 +} +dt { + font-weight: 700 +} +address { + font-size: 86%; + line-height: 1; + font-style: normal +} +address, +ul, +ol { + font-weight: 400; + letter-spacing: 0 +} +ul, +ol { + line-height: 24px +} +.RaisedFrame { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); + z-index: 1; +} +body>div { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); +} +div { + background-color: white; + z-index: 0; +} +.ListView { + border: none; + padding: 0; + background-color: white; + cursor: default; + overflow: auto; + list-style: none; +} +option:hover { + background: rgba(33, 150, 243, .26); + outline: 1px solid red; +} +.ListItem:hover { + background: rgba(33, 150, 243, .26) +} +.ListItem[selected='True'] { + background: rgba(33, 150, 243, .26) +} +input[type='number'], +input[type='text'], +input[type='date'], +input[type='color'], +textarea, +li, +select { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, .12); + display: block; + font-size: 95%; + margin: 0; + width: 100%; + background: 0 0; + text-align: left; + color: inherit; + padding: 0; +} +textarea:disabled, +input[type='checkbox']:disabled, +input[type='color']:disabled, +input[type='number']:disabled, +input[type='text']:disabled, +input[type='date']:disabled { + color: rgba(0,0,0,0.3); + cursor: default; + border-bottom: 1px solid rgba(0,0,0,0.3); +} +select { + border-bottom: 2px solid rgba(0, 0, 0, .12); +} +input[type='checkbox'] { + height: 100%; + min-height: 20px; + min-width: 20px; +} +button { + background: 0 0; + border: none; + border-radius: 2px; + color: #000; + position: relative; + height: 36px; + margin: 0; + padding: 0 8px; + display: inline-block; + font-weight: 500; + letter-spacing: 0; + overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; + will-change: box-shadow; + transition: box-shadow .1s cubic-bezier(.4, 0, 1, 1), background-color .1s cubic-bezier(.4, 0, .2, 1), color .1s cubic-bezier(.4, 0, .2, 1); + outline: none; + cursor: pointer; + text-decoration: none; + text-align: center; + vertical-align: middle; + background: rgb(33, 150, 243); + color: rgb(255, 255, 255); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); +} +button:focus { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .2), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); + font-weight: bold; +} +button:disabled { + background-color: #ddd; + background: #ddd; + border: 1px solid #ddd; + box-shadow: none; + cursor: default; + color: #9F9F9F; +} + button:active{ + background: rgb(25, 145, 223); + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .12), 0 2px 0px -1px rgba(0, 0, 0, .2); +} +.TextInput { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, .12); + display: block; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + margin: 0; + padding: 0; + width: 100%; + background: 0 0; + text-align: left; + color: inherit; +} +table { + border-spacing: 0; + overflow: scroll; + border-collapse: collapse; + text-align: center; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); +} +.TableItem { + padding: 0px; + border: none; + outline: 0px; + border-bottom: 1px solid rgb(218, 218, 218); +} +td { + border: none; + outline: 0px; + background-color: inherit; +} +th { + border: 0px; + outline: 0px; + background: rgb(33, 150, 243); + color: rgb(255, 255, 255); + font-weight: normal; +} +p.DialogTitle { + background: rgb(33, 150, 243); + border: 0px; + margin: 0px; + color: white; + font-weight: bold; + text-align: center; + margin: 0px; +} +p.Title { + border: 0px; + color: inherit; + font-weight: bold; +} +nav > ul.Menu { + background: rgb(33, 150, 243); + border: 0px; + color: white; +} +ul.Menu { + list-style-type: none; + padding: 0; + position: relative; +} +.MenuItem { + cursor: default; + text-align: center; + position: relative; +} +.Menu .Menu { + position: absolute; +} +.Menu .Menu .Menu { + top: 5%; + left: 95%; + position: absolute; +} +.MenuItem .Menu { + display: none; + background-color: white; + /*border: 1px solid #9C9B9B;*/ + + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); + color: black; + height: auto !important; + position: absolute; + top: 100%; + z-index: 1; +} +.MenuBar>.Menu>.MenuItem { + border-bottom: 0; +} +.MenuBar { + border-bottom: 1px solid rgba(0, 0, 0, .26); +} +.Menu > .MenuItem:hover { + background: rgb(33, 150, 243); + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); +} +.MenuItem .MenuItem:hover { + background: rgba(33, 150, 243, .26); +} +.Menu::after { + content: ""; + clear: both; +} +.MenuItem:hover > .Menu { + display: block; +} +input.file { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: 0; + border: 0; + padding: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: rgb(33, 150, 243); + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); +} +input[type='range'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: 0 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: 0; + padding: 0; + color: rgb(33, 150, 243); + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + z-index: 1; + cursor: pointer; + height: 100%; +} +input[type='range']::-moz-focus-outer { + border: 0 +} +input[type='range']::-ms-tooltip { + display: none +} +input[type='range']::-webkit-slider-runnable-track { + background: rgba(33, 150, 243, .26); + height: 2px; +} +input[type='range']::-moz-range-track { + background: rgba(33, 150, 243, .26); + height: 2px; + border: none; +} +input[type='range']::-ms-track { + background: rgba(33, 150, 243, .26); + height: 2px; + color: transparent; + width: 100%; + border: none; +} +input[type='range']::-ms-fill-lower { + padding: 0; + background: linear-gradient(to right, transparent, transparent 16px, rgb(33, 150, 243), rgb(33, 150, 243)0) +} +input[type='range']::-ms-fill-upper { + padding: 0; + background: linear-gradient(to left, transparent, transparent 16px, rgba(0, 0, 0, .26), rgba(0, 0, 0, .26)0) +} +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none; + top: -5px; + width: 12px; + height: 12px; + position: relative; + box-sizing: border-box; + border-radius: 100%; + background: rgb(33, 150, 243); + border: none; + transition: transform .18s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1); + transition: transform .18s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1), -webkit-transform .18s cubic-bezier(.4, 0, .2, 1) +} +input[type='range']::-moz-range-thumb { + -moz-appearance: none; + width: 12px; + height: 12px; + box-sizing: border-box; + border-radius: 100%; + background-image: none; + background: rgb(33, 150, 243); + border: none +} +input[type='range']:focus:not(:active)::-webkit-slider-thumb { + box-shadow: 0 0 0 10px rgba(33, 150, 243, .26) +} +input[type='range']:focus:not(:active)::-moz-range-thumb { + box-shadow: 0 0 0 10px rgba(33, 150, 243, .26) +} +input[type='range']:active::-webkit-slider-thumb { + background-image: none; + background: rgb(33, 150, 243); + -webkit-transform: scale(1.5); + transform: scale(1.5) +} +input[type='range']:active::-moz-range-thumb { + background-image: none; + background: rgb(33, 150, 243); + transform: scale(1.5) +} +input[type='range']::-ms-thumb { + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + background: rgb(33, 150, 243); + transform: scale(.375); + transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1); + transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1), -webkit-transform .18s cubic-bezier(.4, 0, .2, 1) +} +input[type='range']:focus:not(:active)::-ms-thumb { + background: radial-gradient(circle closest-side, rgb(33, 150, 243)0%, rgb(33, 150, 243)37.5%, rgba(33, 150, 243, .26)37.5%, rgba(33, 150, 243, .26)100%); + transform: scale(1) +} +input[type='range']:active::-ms-thumb { + background: rgb(33, 150, 243); + transform: scale(.5625) +} +input[type='range']:disabled:focus::-webkit-slider-thumb, +input[type='range']:disabled:active::-webkit-slider-thumb, +input[type='range']:disabled::-webkit-slider-thumb { + -webkit-transform: scale(.667); + transform: scale(.667); + background: rgba(0, 0, 0, .26) +} +input[type='range']:disabled:focus::-moz-range-thumb, +input[type='range']:disabled:active::-moz-range-thumb, +input[type='range']:disabled::-moz-range-thumb { + transform: scale(.667); + background: rgba(0, 0, 0, .26) +} +#loading { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 10; + background: #000; + opacity: 0.8; +} +#loading-animation { + width: 40px; + height: 40px; + background-color: rgb(33, 150, 243); + + margin: 100px auto; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; +} + +@-webkit-keyframes sk-rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} + +.TabBox ul { + padding-left: 0; +} + +.tabs li { + list-style-type: none; + border: none; +} + +.tabs a { + display: block; + text-align: center; + text-decoration: none; + color: #888; + padding: 20px 0; + border-bottom: 2px solid #888; + background: #f7f7f7; +} +.tabs a:hover, +.tabs a.active { + background: #ddd; +} +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +@media only screen and (max-width: 320px) { + body { + font-size: 12px; + } + button { + padding: 0 2px; + font-size: 12px; + } + select { + font-size: 12px; + } +} + +@media only screen and (max-width: 360px) { + body { + font-size: 13px; + } + button { + padding: 0 2px; + font-size: 13px; + } + select { + font-size: 13px; + } +} + +ul.TreeView{ + list-style-type: none; + padding: 0; + position: relative; + display: block; +} +.TreeItem{ + background-repeat: no-repeat; + text-indent: 18px; + display: block; +} +.TreeItem[has-subtree='true'][treeopen='false']{ + background-image: url('/res/plus.png'); + background-position: 0px 4px; +} +.TreeItem[has-subtree='true'][treeopen='true']{ + background-image: url('/res/minus.png'); + background-position: 0px 4px; + border-bottom: 0; +} +.TreeItem[treeopen="false"] .TreeView .TreeItem{ + display: none; +} +.TreeItem[treeopen="false"] .TreeView{ + display: none; +} +.TreeItem[treeopen="true"] .TreeView{ + padding-left: 18px; +} +.TreeItem:hover { + background-color: rgba(33, 150, 243, .26); +} +.TreeItem[has-subtree='true'][treeopen='true']:hover { + background-color: transparent; +}