From 929ea1a1d7259ba72af8313276592087f550f657 Mon Sep 17 00:00:00 2001 From: John Gruen Date: Fri, 16 Dec 2016 13:37:38 -0500 Subject: [PATCH] update styles for deneb --- addon/data/cancel.svg | 12 +++++++++ addon/data/download.svg | 14 ++++++++++ addon/data/selector-ui.js | 11 ++++---- server/src/pages/shot/view.js | 4 +-- static/css/frame.scss | 11 +++++--- static/css/inline-selection.scss | 44 +++++++++++++++++++++++++++++--- static/img/pencil.svg | 4 +-- 7 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 addon/data/cancel.svg create mode 100644 addon/data/download.svg diff --git a/addon/data/cancel.svg b/addon/data/cancel.svg new file mode 100644 index 0000000000..12e103bcc8 --- /dev/null +++ b/addon/data/cancel.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/addon/data/download.svg b/addon/data/download.svg new file mode 100644 index 0000000000..d5c86f59b1 --- /dev/null +++ b/addon/data/download.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/addon/data/selector-ui.js b/addon/data/selector-ui.js index 31f6bb3ecf..c57273b0b2 100644 --- a/addon/data/selector-ui.js +++ b/addon/data/selector-ui.js @@ -346,17 +346,18 @@ const ui = (function () { // eslint-disable-line no-unused-vars } boxEl = makeEl("div", "pageshot-highlight"); let buttons = makeEl("div", "pageshot-highlight-buttons"); - let download = makeEl("button", "pageshot-highlight-button-download"); - download.textContent = "Download"; - buttons.appendChild(download); let cancel = makeEl("button", "pageshot-highlight-button-cancel"); - cancel.textContent = "Cancel"; + cancel.title = "Cancel"; buttons.appendChild(cancel); + let download = makeEl("button", "pageshot-highlight-button-download"); + download.title="Download"; + buttons.appendChild(download); let save = makeEl("button", "pageshot-highlight-button-save"); save.textContent = "Save"; + save.title = "Save" buttons.appendChild(save); - this.download = download; this.cancel = cancel; + this.download = download; this.save = save; boxEl.appendChild(buttons); for (let name of movements) { diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js index f1c6eebbcd..1bea6628a5 100644 --- a/server/src/pages/shot/view.js +++ b/server/src/pages/shot/view.js @@ -355,12 +355,12 @@ class Body extends React.Component {
- + { trashOrFlagButton } - { trashOrFlagButton } +
{ clips } diff --git a/static/css/frame.scss b/static/css/frame.scss index d644c00e7a..d149374ac2 100644 --- a/static/css/frame.scss +++ b/static/css/frame.scss @@ -76,8 +76,8 @@ .shot-title { font-size: 16px; - height: 25px; - padding: 0 16px 6px 0; + height: 32px; + padding: 6px 22px 6px 0; &.saving { opacity: 0.7; } @@ -86,15 +86,18 @@ &:hover { background-image: url('/static/img/pencil.svg'); background-repeat: no-repeat; - background-position: right; + background-position: center right; background-size: 16px 16px; } } } .shot-title-input { + border: 1px solid $border-color; + border-radius: 3px; font-size: 16px; - height: 25px; + height: 32px; + padding: 0 10px; } .shot-subtitle { diff --git a/static/css/inline-selection.scss b/static/css/inline-selection.scss index 9b3a06da75..a3c11dca07 100644 --- a/static/css/inline-selection.scss +++ b/static/css/inline-selection.scss @@ -47,22 +47,53 @@ $overlay-z-index: 9999999999; .pageshot-highlight-button-cancel { @extend .button; @extend .secondary; + background: $very-light-grey url("cancel.svg") center center no-repeat; + background-size: 18px 18px; margin: 5px; - width: 80px; + width: 40px; + + &:hover, + &:focus, + &:active { + background: darken($very-light-grey, 7) url("cancel.svg") center center no-repeat; + background-size: 18px 18px; + } } .pageshot-highlight-button-save { @extend .button; @extend .primary; + font-size: 18px; margin: 5px; width: 80px; } .pageshot-highlight-button-download { @extend .button; - @extend .primary; + @extend .secondary; + background: $very-light-grey url("download.svg") center center no-repeat; + background-size: 18px 18px; margin: 5px; - width: 100px; + width: 40px; + + &:hover, + &:focus, + &:active { + background: darken($very-light-grey, 7) url("download.svg") center center no-repeat; + background-size: 18px 18px; + } +} + +.pageshot-highlight-button-cancel, +.pageshot-highlight-button-download { + opacity: 0.9; + transition: opacity 250ms; + + &:hover, + &:focus, + &:active { + opacity: 1; + } } .pageshot-mover-target { @@ -291,10 +322,15 @@ $overlay-z-index: 9999999999; .pageshot-pixel-dimensions { position: absolute; pointer-events: none; + font-weight: bold; font-family: sans-serif; font-size: 70%; color: #000; - text-shadow: 1px 1px 0 #fff; + text-shadow: + -1px -1px 0 #fff, + 1px -1px 0 #fff, + -1px 1px 0 #fff, + 1px 1px 0 #fff; } // FIXME: some of the styles in .pageshot-moving-element were copied from diff --git a/static/img/pencil.svg b/static/img/pencil.svg index 44884609ed..b9ae576424 100644 --- a/static/img/pencil.svg +++ b/static/img/pencil.svg @@ -1,4 +1,4 @@ - + - \ No newline at end of file +