From 3698bb24c5ab162efc5b9cdc02e27c47f63a9768 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 7 Nov 2014 14:37:02 +0100 Subject: [PATCH] userZoom layout reference --- .../app/views/agent_ticket_create.jst.eco | 18 +- .../javascripts/app/views/dashboard.jst.eco | 84 +++--- .../app/views/generic/actions.jst.eco | 2 +- .../views/generic/user_search/input.jst.eco | 1 + .../app/views/layout_ref/content.jst.eco | 2 +- .../app/views/layout_ref/index.jst.eco | 1 + .../app/views/layout_ref/user_zoom.jst.eco | 269 ++++++++++++++++++ app/assets/stylesheets/zammad.css.scss | 211 ++++++++++++-- 8 files changed, 515 insertions(+), 73 deletions(-) create mode 100644 app/assets/javascripts/app/views/layout_ref/user_zoom.jst.eco diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco index 5f4dee536..4749680e8 100644 --- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco @@ -65,37 +65,37 @@ -
    +
    +
    Tickets von Doreen Kubiak
    +
    Tickets von Steuerbüro C. Kaik
    +
    + +
    +
    + +
      +
    1. +
      +
      +
      +
      +
      Micro-SIM doesn't work
      +
      23 minutes ago
      +
      +
    2. +
      +
      +
      +
      +
      Superb Service!
      +
      43 minutes ago
      +
      +
    3. +
      +
      +
      +
      +
      Print sheets strip off
      +
      1 hour ago
      +
      +
    4. +
      +
      +
      +
      +
      Block not properly wrought
      +
      2 hour ago
      +
      +
    + Alle Tickets von Doreen Kubiak … +
    +
    + +
      +
    1. +
      +
      +
      +
      +
      Micro-SIM doesn't work
      +
      23 minutes ago
      +
      +
    2. +
      +
      +
      +
      +
      Superb Service!
      +
      43 minutes ago
      +
      +
    3. +
      +
      +
      +
      +
      Print sheets strip off
      +
      1 hour ago
      +
      +
    4. +
      +
      +
      +
      +
      Block not properly wrought
      +
      2 hour ago
      +
      +
    + Alle Tickets von Steuerbüro C. Kaik … +
    +
    + +
    +
    +

    Status

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    Tickets of my Group: 78 of 234
    +
    Average: 22%
    +
    +
    +

    Stimmung

    +
    +
    +
    +
    3% of my tickets escalated.
    +
    Average: 17%
    +
    +
    +
    +
    +

    Frequency

    +
    +
    +
    +
    +
    +
    +
    Jan
    +
    +
    +
    +
    +
    +
    +
    Feb
    +
    +
    +
    +
    +
    +
    +
    Mär
    +
    +
    +
    +
    +
    +
    +
    Apr
    +
    +
    +
    +
    +
    +
    +
    Mai
    +
    +
    +
    +
    +
    +
    +
    Jun
    +
    +
    +
    +
    +
    +
    +
    Jul
    +
    +
    +
    +
    +
    +
    +
    Aug
    +
    +
    +
    +
    +
    +
    +
    Sep
    +
    +
    +
    +
    +
    +
    +
    Okt
    +
    +
    +
    +
    +
    +
    +
    Nov
    +
    +
    +
    +
    +
    +
    +
    Dez
    +
    +
    +
    +
    Bearbeitet
    +
    Offen
    +
    +
    +
    + + \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 192996287..6c70f2d60 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -15,8 +15,13 @@ p { margin: 14px 0; } +.u-highlight { + color: hsl(194,90%,45%); +} + a { outline: none !important; + @extend .u-highlight; } a.create { @@ -29,10 +34,6 @@ small { font-size: 12px; } -.u-highlight { - color: hsl(194,90%,45%); -} - .u-unclickable { pointer-events: none; } @@ -528,7 +529,7 @@ textarea, padding-right: 10px; } - select.form-control + .select-arrow { + .form-control + .select-arrow { position: absolute; right: 12px; top: 50%; @@ -759,7 +760,6 @@ ol.tabs li { } .wide-tabs { - width: 60%; margin: 25px auto 20px; font-size: 15px; font-weight: 300; @@ -767,6 +767,10 @@ ol.tabs li { border-radius: 8px; } + .dashboard .wide-tabs { + width: 60%; + } + .wide-tabs .tab:first-child { border-radius: 8px 0 0 8px; } @@ -1304,6 +1308,7 @@ ol.tabs li { width: 12px; height: 7px; background-position: -81px -308px; + margin-top: -2px; } .dark.group.icon { @@ -1690,29 +1695,35 @@ footer { overflow: auto; } - .tasks.tasks-standalone { + .tasks.tasks--standalone { background: none; margin-top: 8px; } - .tasks-standalone .task { + .tasks--standalone .task { padding: 0; margin-bottom: 9px; + @extend .horizontal; } - .tasks-standalone .icon-holder { + .tasks-standalone .name { + @extend .u-highlight; + @extend .u-textTruncate; + } + + .tasks--standalone .icon-holder { width: 20px; } - .tasks-standalone .icon-holder .icon { + .tasks--standalone .icon-holder .icon { margin-top: 4px; } - .tasks-standalone .time { + .tasks--standalone .time { color: hsl(198,19%,72%); } - .tasks-standalone .task .priority.icon:after { + .tasks--standalone .task .priority.icon:after { background: white; } @@ -2322,10 +2333,13 @@ footer { .stat-widget { height: 200px; - margin: 7px; padding: 13px; text-align: center; line-height: 20px; + } + + .dashboard .stat-widget { + margin: 7px; background: white; border: 1px solid #e5f0f5; border-radius: 1px; @@ -2341,16 +2355,22 @@ footer { .stat-widget .stat-label { color: #444a4f; + @extend .u-textTruncate; } .stat-widget .stat-detail { color: #b4b7b9; + @extend .u-textTruncate; } .channel-distribution.stat-widget { color: #a1a4a7; } + .stat-graphic { + @extend .flex, .horizontal, .centered; + } + .time.stat-widget .stat-graphic .icon { position: relative; } @@ -2370,17 +2390,18 @@ footer { left: 14px; } -.stats-channel { +.stats-row { padding: 8px 0 7px; margin-bottom: -7px; border-radius: 3px; + @extend .vertical, .center; } -.stats-channel:hover { +.stats-row:hover { background: rgba(0,8,14,.03); } - .stats-channel .channel-bars { + .stats-row .stat-bars { height: 73px; margin: 16px 0 15px; padding: 2px 12px; @@ -2388,18 +2409,62 @@ footer { background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px); background-position: center bottom; background-size: 100% 12px; + @extend .horizontal, .end; } - .channel-bars .channel-bar { + .stat-bars .stat-bar { border-radius: 5px; width: 10px; + color: #a9bcc4; background: #a9bcc4; } - .channel-bars .channel-bar.secondary { + .stat-widget .secondary { opacity: .38; + color: #a9bcc4; + background: #a9bcc4; } + .stat-legend { + margin-top: 30px; + @extend .align-right, .horizontal; + } + + .stat-legendEntry { + font-size: 11px; + line-height: 1; + margin-left: 20px; + background: none !important; + } + + .stat-circle { + margin-bottom: -1px; + margin-right: 7px; + width: 10px; + height: 10px; + border-radius: 100%; + display: inline-block; + } + +.frequency.stat-widget { + .stat-bars { + margin-top: 0; + } + + .stats-row { + margin-bottom: 0; + } + + .stat-label { + color: #a1a4a7; + } + + .primary { + color: hsl(145,51%,45%); + background: hsl(145,51%,45%); + } +} + .activity.sidebar { width: 370px; padding: 0; @@ -3550,7 +3615,7 @@ footer { .dropdown-menu { margin: 0; padding: 0; - width: 100%; + min-width: 100%; color: white; background: none; border-radius: 0; @@ -3559,6 +3624,10 @@ footer { overflow-x: hidden; } + .dropdown-toggle { + @extend .u-clickable; + } + .dropdown ul { margin: 0; background: hsl(234,10%,19%); @@ -3598,10 +3667,14 @@ footer { display: block; } - .dropdown.actions li { + .dropdown.dropdown--actions li { padding: 0; } + .dropdown.dropdown--actions a { + @extend .u-clickable; + } + .recipientList, .recipientList-organisationMembers { list-style: none; @@ -3622,6 +3695,7 @@ footer { } .recipientList-name { + color: white; margin-left: 10px; margin-top: 2px; } @@ -4083,6 +4157,103 @@ footer { left: 0 !important; } +.userZoom { + padding: 60px; + overflow: auto; + + h1 { + margin: 18px 0 0; + } + + .tabs { + margin-top: 2px; + margin-bottom: 25px; + } +} + +.userZoom-window { + background: white; + max-width: 660px; + margin: 0 auto; + border: 1px solid #e6e6e6; +} + +.userZoom-section { + padding: 20px 50px; +} + +.userZoom-section:not(:last-child) { + border-bottom: 1px solid #f2f2f2; +} + +.userZoom-action { + margin-right: -20px; + + .dropdown-toggle { + margin-top: -20px; + margin-right: -30px; + margin-bottom: 8px; + padding: 26px 40px 2px; + } + + label { + margin: 0 10px; + padding: 0; + opacity: 0.8; + cursor: inherit; + } + .cog.icon { + opacity: 0.55; + } +} + +.userZoom-organisation { + font-size: 16px; + @extend .u-highlight; +} + +.userZoom-details { + margin-left: -50px; +} + +.userZoom-detailsEntry { + margin: 8px 0; + padding-left: 50px; + width: 50%; +} + +.userZoom-detailsEntry label { + padding: 0; + margin-bottom: 2px; + display: block; +} + +.userZoom-ticketList { + @extend .flex; + + &:not(:last-child) { + margin-right: 50px; + } +} + +.userZoom-ticketList { + ol { + padding: 0; + } + + .name { + @extend .u-highlight; + } +} + +.userZoom .frequency.stat-widget { + height: 230px; + + .stat-bars { + height: 100px; + } +} + /*