From 27515c2a2e5ec53fc3c3112d8f013dbc8e3ebc45 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 20 Feb 2017 09:01:00 +0100 Subject: [PATCH 1/5] Radio Input indeterminate bugfix - fixes #786 --- app/assets/stylesheets/zammad.scss | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 80ae54dfd..4aa9f28c6 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -1098,16 +1098,6 @@ th.align-right { box-shadow: 0 0 0 2px hsl(201,62%,90%); color: hsl(200,71%,59%); } - - &:indeterminate { - ~ .icon-checked, - ~ .icon-unchecked { - display: none; - } - ~ .icon-indeterminate { - display: block; - } - } } + .label-text { @@ -1115,6 +1105,18 @@ th.align-right { } } +.checkbox-replacement { + &:indeterminate { + ~ .icon-checked, + ~ .icon-unchecked { + display: none; + } + ~ .icon-indeterminate { + display: block; + } + } +} + .radio-replacement { input:focus ~ .icon-checked, input:focus ~ .icon-unchecked { From b3481f197e560639490331192b24953f1cc8e8da Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 21 Feb 2017 08:59:23 +0100 Subject: [PATCH 2/5] Article View - use greyed out color instead of opacity to tone down the text and icon color because opacity makes the text look ugly --- app/assets/stylesheets/zammad.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 4aa9f28c6..b25c022e0 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -4725,17 +4725,15 @@ footer { .article-action { padding-top: 5px; margin-top: 5px; - color: black; + color: hsl(198,4%,56%); font-size: 12px; text-align: center; - opacity: 0.5; @extend .u-clickable; } .article-action:hover { color: black; text-decoration: none; - opacity: 1; } .article-action-icon { @@ -4743,6 +4741,7 @@ footer { vertical-align: top; width: 17px; height: 17px; + fill: currentColor; } .article-add { From d9aa5db55f1c28db59ac831e9af306202e05b0db Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 21 Feb 2017 09:58:10 +0100 Subject: [PATCH 3/5] Group Avatar - add support for group avatars - get different background colors - blue, green and yellow - based on the id - use the team icon --- .../javascripts/app/models/group.coffee | 8 ++++ .../app/views/avatar_group.jst.eco | 3 ++ app/assets/stylesheets/zammad.scss | 44 +++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 app/assets/javascripts/app/views/avatar_group.jst.eco diff --git a/app/assets/javascripts/app/models/group.coffee b/app/assets/javascripts/app/models/group.coffee index b9b2925a2..b849bd075 100644 --- a/app/assets/javascripts/app/models/group.coffee +++ b/app/assets/javascripts/app/models/group.coffee @@ -27,3 +27,11 @@ class App.Group extends App.Model else if item.type is 'update' return App.i18n.translateContent('%s updated Group |%s|', item.created_by.displayName(), item.title) return "Unknow action for (#{@objectDisplayName()}/#{item.type}), extend activityMessage() of model." + + avatar: (size = 40, cssClass = []) -> + size = parseInt(size, 10) + cssClass.push("size-#{ size }") + cssClass.push("avatar--group-color-#{@id % 3}") + + return App.view('avatar_group') + cssClass: cssClass.join(" ") \ No newline at end of file diff --git a/app/assets/javascripts/app/views/avatar_group.jst.eco b/app/assets/javascripts/app/views/avatar_group.jst.eco new file mode 100644 index 000000000..10dba620d --- /dev/null +++ b/app/assets/javascripts/app/views/avatar_group.jst.eco @@ -0,0 +1,3 @@ + + <%- @Icon('team') %> + \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index b25c022e0..e73efaaa7 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -3648,6 +3648,50 @@ footer { } } + &--group { + overflow: hidden; + + .icon { + fill: white; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 44px; + height: 44px; + bottom: -8px; + } + + &.size-30 .icon { + width: 33px; + height: 33px; + bottom: -6px; + } + + &.size-50 .icon { + width: 55px; + height: 55px; + bottom: -10px; + } + + &.size-80 .icon { + width: 88px; + height: 88px; + bottom: -15px; + } + + &-color-0 { + background: hsl(192,100%,38%); + } + + &-color-1 { + background: hsl(148,100%,38%); + } + + &-color-2 { + background: hsl(57,100%,37%); + } + } + .icon-logo { width: 100%; height: 100%; From 925b6dab5a1fd7ba0d8c18ca1b01d06694f2e8f8 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 21 Feb 2017 09:58:40 +0100 Subject: [PATCH 4/5] Batch Overlay - use group avatar --- .../views/ticket_overview/batch_overlay_user_group.jst.eco | 4 +--- app/assets/stylesheets/zammad.scss | 5 +---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/app/views/ticket_overview/batch_overlay_user_group.jst.eco b/app/assets/javascripts/app/views/ticket_overview/batch_overlay_user_group.jst.eco index 926cf58fa..2931f9bd3 100644 --- a/app/assets/javascripts/app/views/ticket_overview/batch_overlay_user_group.jst.eco +++ b/app/assets/javascripts/app/views/ticket_overview/batch_overlay_user_group.jst.eco @@ -6,9 +6,7 @@ <% end %> <% for group in @groups: %>
- - <%- @Icon('organization') %> - +
<%- group.avatar(80) %>
<%- group.displayName() %>
<%- @T('%s people', group.valid_user_ids.length) %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index e73efaaa7..339996582 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -8586,10 +8586,7 @@ output { box-sizing: content-box; transition: transform 120ms; cursor: inherit; - - &--organization { - background: hsl(191,68%,47%); - } + z-index: 1; } &-name { From 20236091de3a655baadde228ad624a82e42fe8bb Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 21 Feb 2017 09:58:55 +0100 Subject: [PATCH 5/5] Batch Overlay - center cancel area in empty space --- .../app/controllers/ticket_overview.coffee | 15 ++++++++------- app/assets/stylesheets/zammad.scss | 7 +++++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/app/controllers/ticket_overview.coffee b/app/assets/javascripts/app/controllers/ticket_overview.coffee index f230ebc09..4df9b2a7f 100644 --- a/app/assets/javascripts/app/controllers/ticket_overview.coffee +++ b/app/assets/javascripts/app/controllers/ticket_overview.coffee @@ -350,6 +350,10 @@ class App.TicketOverview extends App.Controller return if !@batchOverlayShown # user might have dropped the item already @batchAssignShown = true + @batchCancel.css + top: 0 + bottom: @batchAssign.height() + @batchAssign.velocity properties: translateY: [0, '100%'] @@ -360,10 +364,6 @@ class App.TicketOverview extends App.Controller visibility: 'visible' complete: @highlightBatchEntryAtMousePosition - @batchCancel.css - top: 0 - bottom: 'auto' - @batchCancel.velocity properties: translateY: [0, '100%'] @@ -452,6 +452,10 @@ class App.TicketOverview extends App.Controller return if !@batchOverlayShown # user might have dropped the item already @batchMacroShown = true + @batchCancel.css + bottom: 0 + top: @batchMacro.height() + @batchMacro.velocity properties: translateY: [0, '-100%'] @@ -462,9 +466,6 @@ class App.TicketOverview extends App.Controller visibility: 'visible' complete: @highlightBatchEntryAtMousePosition - @batchCancel.css - top: 'auto' - bottom: 0 @batchCancel.velocity properties: translateY: [0, '-100%'] diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 339996582..353cee5e3 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -8511,13 +8511,16 @@ output { border: 2px dashed hsla(0,0%,100%,.3); border-radius: 8px; padding: 28px; - margin: 50px 200px; + margin: auto 200px; position: absolute; - top: 0; left: 0; right: 0; + max-height: 100px; visibility: hidden; will-change: opacity; + display: flex; + justify-content: center; + align-items: center; } &-box {