From dc2f2a800105b77e665ec2a00c6290f35b1a2ba3 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Tue, 5 Jul 2016 11:58:18 -0400 Subject: PLT-3145 Custom Emojis (#3381) * Reorganized Backstage code to use a view controller and separated it from integrations code * Renamed InstalledIntegrations component to BackstageList * Added EmojiList page * Added AddEmoji page * Added custom emoji to autocomplete and text formatter * Moved system emoji to EmojiStore * Stopped trying to get emoji before logging in * Rerender posts when emojis change * Fixed submit handler on backstage pages to properly support enter * Removed debugging code * Updated javascript driver * Fixed unit tests * Fixed backstage routes * Added clientside validation to prevent users from creating an emoji with the same name as a system one * Fixed AddEmoji page to properly redirect when an emoji is created successfully * Fixed updating emoji list when an emoji is deleted * Added type prop to BackstageList to properly support using a table for the list * Added help text to EmojiList * Fixed backstage on smaller screen sizes * Disable custom emoji by default * Improved restrictions on creating emojis * Fixed non-admin users seeing the option to delete each other's emojis * Fixing gofmt * Fixed emoji unit tests * Fixed trying to get emoji from the server when it's disabled --- webapp/sass/responsive/_mobile.scss | 1 - webapp/sass/routes/_backstage.scss | 196 ++++++++++++++++++++++++------------ 2 files changed, 130 insertions(+), 67 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 884c69d74..ba72a8119 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -19,7 +19,6 @@ display: block; .backstage-filter__search { - border-bottom: 1px solid $light-gray; margin: 10px 0; width: 100%; } diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 244aad043..5d7942184 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -1,35 +1,11 @@ -body { - &.backstage { - height: auto; - overflow: auto; - - .inner-wrap { - @include translateX(0); - margin-right: 0 !important; - - &:before { - display: none; - } - } - - .sidebar--right, - .sidebar--menu, - .navbar { - display: none; - } - } -} - -.backstage-content { - background-color: $bg--gray; - height: 100%; - margin: 46px auto; - max-width: 960px; - padding-left: 135px; +.backstage { + height: 100vh; + width: 100vw; } .backstage-navbar { background: $white; + height: 41px; border-bottom: 1px solid $light-gray; padding: 10px 20px; z-index: 10; @@ -51,13 +27,29 @@ body { } } +.backstage-body { + background-color: $bg--gray; + bottom: 0; + display: inline-block; + height: calc(100vh - 41px); + overflow: auto; + top: 0; + width: 100%; +} + +.backstage-content { + background-color: $bg--gray; + margin: 46px auto; + max-width: 960px; + padding-left: 135px; + vertical-align: top; +} + .backstage-sidebar { - height: 100%; - left: 0; - padding: 50px 20px; + padding: 46px 20px; position: absolute; + vertical-align: top; width: 260px; - z-index: 5; ul { list-style: none; @@ -69,6 +61,7 @@ body { border: 1px solid $light-gray; .category-title { + color: $black; display: block; line-height: 36px; padding: 0 10px; @@ -76,7 +69,8 @@ body { } .category-title--active { - color: $black; + background-color: $primary-color; + color: $white; } .category-title__text { @@ -110,8 +104,8 @@ body { } } -.backstage__sidebar__category + .backstage__sidebar__category { - border-top-width: 0; +.backstage-sidebar__category + .backstage-sidebar__category { + margin-top: 1em; } .backstage-header__divider { @@ -130,7 +124,7 @@ body { margin: 5px 0; } - .add-integrations-link { + .add-link { float: right; } } @@ -139,45 +133,45 @@ body { display: flex; flex-direction: row; width: 100%; +} - .backstage-filters__sort { - flex-grow: 1; - flex-shrink: 0; - line-height: 30px; +.backstage-filters__sort { + flex-grow: 1; + flex-shrink: 0; + line-height: 30px; - .filter-sort { - text-decoration: none; + .filter-sort { + text-decoration: none; - &.filter-sort--active { - color: inherit; - cursor: default; - } + &.filter-sort--active { + color: inherit; + cursor: default; } + } - .divider { - margin-left: 8px; - margin-right: 8px; - } + .divider { + margin-left: 8px; + margin-right: 8px; } +} - .backstage-filter__search { - flex-grow: 0; - flex-shrink: 0; - position: relative; - width: 270px; +.backstage-filter__search { + flex-grow: 0; + flex-shrink: 0; + position: relative; + width: 270px; - .fa { - @include opacity(.4); - left: 11px; - position: absolute; - top: 11px; - } + .fa { + @include opacity(.4); + left: 11px; + position: absolute; + top: 11px; + } - input { - background: $white; - border-bottom: none; - padding-left: 30px; - } + input { + background: $white; + border-bottom-width: 0; + padding-left: 30px; } } @@ -332,3 +326,73 @@ body { .integration-option__description { color: $dark-gray; } + +.emoji-list .backstage-filter__search input { + border-bottom-width: 1px; +} + +.emoji-list__help { + display: block; + padding: 1em 0; +} + +.emoji-list__table { + width: 100%; + + .backstage-list__item { + display: table-row; + } + + .backstage-list__empty td { + padding: 15px 20px; + } +} + +.emoji-list__table-header { + font-weight: bold; +} + +.emoji-list__name { + padding: 20px 0px 20px 15px; + width: 30%; +} + +.emoji-list__image { + padding: 15px 0px; + width: 15%; +} + +&.emoji-list__creator { + padding: 15px 0px; + width: 40%; +} + +&.emoji-list__actions { + padding: 20px 15px 20px 0px; + width: 15%; +} + +.add-emoji__upload { + display: inline-block; + margin: 0 10px 10px 0; + position: relative; + + input { + @include opacity(0); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + } +} + +.add-emoji__filename, +.add-emoji__preview { + padding-top: 7px; + + .emoticon { + margin-bottom: 0; + } +} \ No newline at end of file -- cgit v1.2.3-1-g7c22