From 7ac0a5c280c6c32f3bf6728e576d3fa405f5163e Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 20 Nov 2015 11:52:31 +0100 Subject: [PATCH 1/2] tone down menu-item hover state switch background --- app/assets/stylesheets/zammad.scss | 37 +++++++++++------------------- 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index a0b87c71a..cd698935b 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -2665,11 +2665,17 @@ footer { &.is-active, &.is-hovered { - background: #389ed9; + background: hsl(202,68%,54%); } - &.is-active .zammad-switch label:after { - background: white; + &.is-active .zammad-switch { + input:not(:checked) + label { // switch background + background: hsl(202,68%,43%); + } + + label:after { + background: white; + } } .dropdown-icon { @@ -6455,8 +6461,8 @@ output { border-radius: inherit; outline: none; cursor: pointer; - background: hsl(0,0%,90%); - transition: background 400ms; + background: white; + box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; } .zammad-switch input { @@ -6465,6 +6471,7 @@ output { .zammad-switch input:checked + label { background: $supergood-color; + transition: none; } .zammad-switch input:focus + label { @@ -6473,26 +6480,10 @@ output { box-shadow: 0 0 0 3px hsl(201,62%,90%); } -.zammad-switch label:after, -.zammad-switch label:before { +.zammad-switch label:after { content: ""; position: absolute; - transition: 200ms; -} - -.zammad-switch label:before { - width: calc(100% - 2px); - height: calc(100% - 2px); - left: 1px; - top: 1px; - border-radius: inherit; - background: hsl(210,17%,99%); - transform-origin: right; -} - -.zammad-switch input:checked + label:before { - transform: scaleX(0); - opacity: 0; + transition: transform 200ms; } .zammad-switch label:after { From 34e517262cc6041be2aeb423c1af22a296a1eed1 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 20 Nov 2015 12:03:25 +0100 Subject: [PATCH 2/2] twitter config mockup --- .../app/controllers/_channel/twitter.coffee | 13 +++++ .../app/views/twitter/account_edit.jst.eco | 0 .../app/views/twitter/app_create.jst.eco | 32 +++++++++++ .../app/views/twitter/index.jst.eco | 47 ---------------- .../app/views/twitter/list.jst.eco | 55 +++++++++++++++++++ app/assets/stylesheets/zammad.scss | 9 +++ 6 files changed, 109 insertions(+), 47 deletions(-) create mode 100644 app/assets/javascripts/app/views/twitter/account_edit.jst.eco create mode 100644 app/assets/javascripts/app/views/twitter/app_create.jst.eco create mode 100644 app/assets/javascripts/app/views/twitter/list.jst.eco diff --git a/app/assets/javascripts/app/controllers/_channel/twitter.coffee b/app/assets/javascripts/app/controllers/_channel/twitter.coffee index 156eb26b9..03916b86e 100644 --- a/app/assets/javascripts/app/controllers/_channel/twitter.coffee +++ b/app/assets/javascripts/app/controllers/_channel/twitter.coffee @@ -3,6 +3,7 @@ class Index extends App.ControllerContent 'click .js-new': 'new' 'click .js-edit': 'edit' 'click .js-delete': 'delete' + 'click .js-create-app': 'createApp' constructor: -> super @@ -46,6 +47,18 @@ class Index extends App.ControllerContent # showDescription: showDescription # description: description + createApp: -> + modal = new App.ControllerModalNice + head: 'Connect Twitter App' + container: @el.parents('.content') + content: App.view('twitter/app_create') + shown: true + button: 'Connect' + cancel: true + onSubmit: () => + @html App.view('twitter/list')() + modal.close() + new: (e) -> # e.preventDefault() # new App.ControllerGenericNew( diff --git a/app/assets/javascripts/app/views/twitter/account_edit.jst.eco b/app/assets/javascripts/app/views/twitter/account_edit.jst.eco new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/javascripts/app/views/twitter/app_create.jst.eco b/app/assets/javascripts/app/views/twitter/app_create.jst.eco new file mode 100644 index 000000000..611d05c6a --- /dev/null +++ b/app/assets/javascripts/app/views/twitter/app_create.jst.eco @@ -0,0 +1,32 @@ +

Create Twitter App

+

+ The tutorial on how to create a Twitter App is hosted on zammad.org/twitter-app-tutorial +

+
+
+
+ +
+
+ + You need this callback URL for the Twitter App setup. +
+
+

Enter your Twitter App Keys

+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/twitter/index.jst.eco b/app/assets/javascripts/app/views/twitter/index.jst.eco index ea9ee5999..9d090c0af 100644 --- a/app/assets/javascripts/app/views/twitter/index.jst.eco +++ b/app/assets/javascripts/app/views/twitter/index.jst.eco @@ -2,11 +2,6 @@

<%- @T('Twitter') %> <%- @T('Accounts') %>

- -
- -
@@ -16,46 +11,4 @@

<%- @T('Connect Twitter App') %>
- \ No newline at end of file diff --git a/app/assets/javascripts/app/views/twitter/list.jst.eco b/app/assets/javascripts/app/views/twitter/list.jst.eco new file mode 100644 index 000000000..7e19755f9 --- /dev/null +++ b/app/assets/javascripts/app/views/twitter/list.jst.eco @@ -0,0 +1,55 @@ +
+
+

<%- @T('Twitter') %> <%- @T('Accounts') %>

+
+ +
+ <%- @T('Configure App') %> + <%- @T('Add Account') %> +
+
+ +
+
+
+

<%- @Icon('status', 'supergood-color inline') %> Zammad Community @zammad_community

+
+
+
+

<%- @T('Search Terms') %>

+ zammad +
+ <%- @Icon('arrow-right', 'action-flow-icon') %> +
+

<%- @T('Group') %>

+ social network +
+
+
+
+

<%- @T('Mentions') %>

+ @zammad_community +
+ <%- @Icon('arrow-right', 'action-flow-icon') %> +
+

<%- @T('Group') %>

+ social network +
+
+
+
+

<%- @T('Direct Messages') %>

+ @zammad_community +
+ <%- @Icon('arrow-right', 'action-flow-icon') %> +
+

<%- @T('Group') %>

+ social network +
+
+
+
<%- @T('Delete') %>
+
<%- @T('Edit') %>
+
+
+
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index cd698935b..30f049ccc 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -1367,6 +1367,15 @@ textarea, &.form-control--multiline { height: auto; } + + &[readonly] { + background: hsl(198,10%,95%); + + &:focus { + box-shadow: none; + border-color: hsl(0,0%,90%); + } + } } input[type=url] {