diff --git a/app/assets/images/tickets/ticket-select-arrow.png b/app/assets/images/tickets/ticket-select-arrow.png new file mode 100644 index 0000000..7518472 Binary files /dev/null and b/app/assets/images/tickets/ticket-select-arrow.png differ diff --git a/app/assets/stylesheets/tickets/_common.scss b/app/assets/stylesheets/tickets/_common.scss index 91bdc95..a9b355e 100644 --- a/app/assets/stylesheets/tickets/_common.scss +++ b/app/assets/stylesheets/tickets/_common.scss @@ -1,74 +1,178 @@ @charset "utf-8"; @import 'ticket_variables'; + #filter { - display: none; + display: none; +} + +.ticket-container { + max-width: $main-width; + width: 96%; + margin: auto; } .img-avatar { - width: 50px; - height: 50px; + width: 50px; + height: 50px; } .t-avatar { - width: 30px; - height: 30px; - border-radius: 50%; + width: 30px; + height: 30px; + border-radius: 50%; } .t-label { - border-radius: 0.125rem; - display: inline-block; - padding: 4px 0.5rem; - font-family: $main-font; + border-radius: 0.125rem; + display: inline-block; + padding: 4px 0.5rem; + font-family: $main-font; } .t-label-primary { - color: $gray; - background-color: $white; + color: $gray; + background-color: $white; } .t-status { - text-transform: uppercase; - border-radius: 0.125rem; - font-size: 0.75rem; - display: inline-block; - padding: 4px 0.375rem; - font-family: $main-font; + text-transform: uppercase; + border-radius: 0.125rem; + font-size: 0.75rem; + display: inline-block; + padding: 4px 0.375rem; + font-family: $main-font; } .t-status-open { - color: $white; - background-color: $green; + color: $white; + background-color: $green; } .t-status-close { - color: $white; - background-color: $gray; + color: $white; + background-color: $gray; } .t-status-processing { - color: $white; - background-color: $purple; + color: $white; + background-color: $purple; } // change bootstrap label colors to fit this design theme .label { - text-shadow: none; - font-family: $main-font; - font-size: 12px; - font-weight: 100; - display: inline-block; + text-shadow: none; + font-family: $main-font; + font-size: 12px; + font-weight: 100; + display: inline-block; } + .label-primary { - background-color: $primary; + background-color: $primary; } + +.label-second { + background-color: $second; +} + +.label-info { + background-color: $green; +} + .label-open { - background-color: $green; + background-color: $green; } .label-commenced { - background-color: $purple; + background-color: $purple; } + .label-danger { - background-color: $red; -} \ No newline at end of file + background-color: $red; +} + +.btn { + padding: 6px 1rem; + font-family: $main-font; + font-size: 0.8125rem; + text-shadow: none; + letter-spacing: 0; + border: 0; + border-radius: $t-round; + background-color: $primary; + background-image: none; + &.btn-primary { + background-color: $second; + &:hover { + background-color: darken($second, 5%); + } + } + &.btn-normal { + color: $white; + background-color: lighten($gray, 8%); + &:hover { + background-color: $second; + } + } +} + + + +// Tool Tip +.tool-tip-parent { + position: relative; + + &:hover { + .tool-tip { + display: block; + } + } +} + +.tool-tip { + padding: 6px 0.75rem; + border-radius: $t-round; + color: $white; + background: $black; + position: absolute; + left: 0; + bottom: 120%; + z-index: 150; + display: none; + white-space: nowrap; + + &:after { + border: 5px solid transparent; + border-top-color: $black; + content: ""; + position: absolute; + left: 10px; + bottom: -8px; + } + + &.right { + left: auto; + right: 0; + + &:after { + left: auto; + right: 10px; + } + } + + &.bottom { + top: 100%; + bottom: auto; + + &:after { + top: -10px; + bottom: auto; + border-top-color: transparent; + border-bottom-color: rgba(0, 0, 0, 0.85); + } + } + + &.nowrap { + white-space: nowrap; + } +} diff --git a/app/assets/stylesheets/tickets/_ticket_variables.scss b/app/assets/stylesheets/tickets/_ticket_variables.scss index f6af5ff..1c36ce1 100644 --- a/app/assets/stylesheets/tickets/_ticket_variables.scss +++ b/app/assets/stylesheets/tickets/_ticket_variables.scss @@ -23,6 +23,8 @@ $light-gray: #edf0f1; $white: #fff; $black: #000; +$subtle-black: #5a5a5a; + // units $main-width: 1000px; $t-round: 0.125rem; diff --git a/app/assets/stylesheets/tickets/ticket_index.scss b/app/assets/stylesheets/tickets/ticket_index.scss index 4bf7b3e..32c775a 100644 --- a/app/assets/stylesheets/tickets/ticket_index.scss +++ b/app/assets/stylesheets/tickets/ticket_index.scss @@ -1,159 +1,182 @@ @charset "utf-8"; -@import 'ticket_variables'; -@import 'common'; -@import 'classes'; + +@import "ticket_variables"; +@import "common"; +@import "classes"; body { - background-color: $subtle-gray; + background-color: $subtle-gray; } .ticket-container { - a { - color: $primary; - &:hover { - color: lighten($primary, 10%); - } + a { + color: $primary; + + &:hover { + color: lighten($primary, 10%); } + } } -.ticket-container, -.ticket-search-wrap { - max-width: $main-width; - width: 96%; - margin: auto; -} .ticket-search-wrap { - font-family: $main-font; + font-family: $main-font; + color: $gray; + + .ticket-search-option { + outline: none; + width: 15%; + padding-left: 20px; + height: 50px; + border: none; + border-radius: $t-round; + font-size: 18px; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: $white url(/assets/tickets/ticket-select-arrow.png) 90% 50% no-repeat; + } + + .ticket-search-field { color: $gray; - .ticket-search-option { - width: 15%; - height: 50px; - border: none; - border-radius: $t-round; - font-size: 18px; - } - .ticket-search-field { - color: $gray; - font-size: 18px; - font-weight: normal; - padding: 0 20px; - width: 84%; - height: 50px; - margin-bottom: 0; + font-size: 18px; + font-weight: normal; + padding: 0 20px; + width: 84%; + height: 50px; + margin-bottom: 0; + box-shadow: none; + border: none; + border-radius: $t-round; + &:focus { box-shadow: none; - border: none; - border-radius: $t-round; + border: 0; } + } } .ticket-section { - margin-bottom: 20px; + margin-bottom: 20px; } .ticket-section-heading { - background-color: $primary; - color: $white; - padding: 16px 14px; - margin-bottom: 0; - font-family: $main-font; - &.type--ugrent { - background-color: $red; - } - &.type--normal { - background-color: $second; - } + background-color: $primary; + color: $white; + padding: 16px 14px; + margin-bottom: 0; + font-family: $main-font; + + &.type--ugrent { + background-color: $red; + } + + &.type--normal { + background-color: $second; + } } .ticket-section-heading-icon { - margin-right: 8px; + margin-right: 8px; } .ticket-section-container { - background-color: $white; - margin-bottom: 20px; - position: relative; + background-color: $white; + margin-bottom: 20px; + position: relative; } .ticket-category-title { - margin: 0; - padding: 20px 16px; - background-color: #fbfbfb; - font-family: $main-font; - border-bottom: 1px solid $light-gray; + margin: 0; + padding: 20px 16px; + background-color: #fbfbfb; + font-family: $main-font; + border-bottom: 1px solid $light-gray; } .ticket-category-title-icon { - margin-right: 5px; + margin-right: 5px; } .ticket-item { - padding: 16px 20px; - border-bottom: 1px solid $light-gray; - font-family: $main-font; + padding: 16px 20px; + border-bottom: 1px solid $light-gray; + font-family: $main-font; + + &:hover { + background-color: $light-blue; + } + + .ticket-site-link { + margin-left: 8px; + padding: 2px 4px; + font-size: 12px; + color: $white; + background-color: $second; + border-radius: $t-strong-round; + &:hover { - background-color: $light-blue; - } - .ticket-site-link { - margin-left: 8px; - padding: 2px 4px; - font-size: 12px; - color: $white; - background-color: $second; - border-radius: $t-strong-round; - &:hover { - color: $white; - text-decoration: none; - background-color: darken($second, 10%); - } + color: $white; + text-decoration: none; + background-color: darken($second, 10%); } + } } .ticket-item:first-child { - border-top: 1px solid $light-gray; + border-top: 1px solid $light-gray; } .ticket-label { - white-space: nowrap; + white-space: nowrap; } .ticket-section-view-all { - position: absolute; - right: 2rem; - top: 20px; + position: absolute; + right: 2rem; + top: 20px; + + &:hover { + .ticket-section-view-all-icon { + top: 0; + } + } + + .ticket-section-view-all-btn { + overflow: hidden; + display: block; + font-size: 12px; + color: $gray; + font-family: $main-font; + &:hover { - .ticket-section-view-all-icon { - top: 0; - } - } - .ticket-section-view-all-btn { - overflow: hidden; - display: block; - font-size: 12px; - color: $gray; - font-family: $main-font; - &:hover { - text-decoration: none; - } + text-decoration: none; } + } } .ticket-section-view-all-icon { - position: relative; - top: 40px; - color: $second; - -webkit-webkit-transition: $t-fast all; - transition: $t-fast all; + position: relative; + top: 40px; + color: $second; + -webkit-webkit-transition: $t-fast all; + transition: $t-fast all; } - // Search result .ticket-search-result { - background-color: $second; - padding: 16px 14px; + background-color: $second; + padding: 16px 14px; + color: $white; + font-size: 24px; + + a { color: $white; - font-size: 24px; - a { - color: $white; + &:hover { + color: $white; + text-decoration: none; } -} \ No newline at end of file + &:active { + text-decoration: none; + } + } +} diff --git a/app/assets/stylesheets/tickets/ticket_show.scss b/app/assets/stylesheets/tickets/ticket_show.scss index 6820257..2a176e7 100644 --- a/app/assets/stylesheets/tickets/ticket_show.scss +++ b/app/assets/stylesheets/tickets/ticket_show.scss @@ -1,718 +1,809 @@ @charset "utf-8"; -@import 'ticket_variables'; -@import 'common'; -@import 'classes'; +@import "ticket_variables"; +@import "common"; +@import "classes"; #main-wrap .wrap-inner { - padding-top: 20px !important; + padding-top: 20px !important; } #new-ticket .no-space { - margin-bottom: 0px; - display: none; + margin-bottom: 0px; + display: none; } #connection-status { - text-align: center; + text-align: center; } #connection-status span.label { - font-size: 14px; - line-height: 18px; + font-size: 14px; + line-height: 18px; } #ticket_loader { - text-align: center; + text-align: center; } #tickets_list tbody tr { - cursor: pointer; + cursor: pointer; } #tickets_list th.sort-field { - cursor: pointer; + cursor: pointer; } #ticket_footer_pagination { - text-align: center; - @media screen and (max-width: 50rem) { - text-align: left; - } + text-align: center; + @media screen and (max-width: 50rem) { + text-align: left; + } } #ticket_footer_pagination .pagination { - margin: 0 0; + margin: 0 0; +} + +.ticket-home-btn-wrap { + margin-bottom: 10px; +} + +.ticket-home-btn-icon, +.ticket-external-link-icon { + margin-right: 8px; } .ticket-refresh-btn, .ticket-create-btn { - margin-top: -14px; + margin-top: -14px; } .label { - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } .ticket-modal { - width: 80%; - height: 700px; - max-width: 1000px; - bottom: 0; - left: 0; - right: 0; - margin: auto; + width: 80%; + height: 700px; + max-width: 1000px; + bottom: 0; + left: 0; + right: 0; + margin: auto; } .ticket-modal.modal.in { - top: 0; + top: 0; } .ticket-modal .modal-body { - max-height: 560px; + max-height: 560px; } .ticket-modal .label-value { - width: auto; + width: auto; } .search-wrap { - display: inline-block; + display: inline-block; } #serach-btn { - font-size: 20px; - margin-right: 5px; - font-weight: bold; - text-decoration: none; + font-size: 20px; + margin-right: 5px; + font-weight: bold; + text-decoration: none; } .search-box { - display: none; + display: none; } .search-box input { - height: 14px; + height: 14px; } @media screen and (max-width: 800px) { - .ticket-modal .control-label { - float: none; - width: auto; - text-align: left; - padding: 0; - margin-bottom: 2px; - } - .ticket-modal .form-horizontal .controls { - margin-left: 0; - } - #new-ticket .no-space { - margin-bottom: 10px; - } + .ticket-modal .control-label { + float: none; + width: auto; + text-align: left; + padding: 0; + margin-bottom: 2px; + } + .ticket-modal .form-horizontal .controls { + margin-left: 0; + } + #new-ticket .no-space { + margin-bottom: 10px; + } } .t-list-unstyled { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .t-category { - border-radius: 0.125rem; - display: inline-block; - padding: 4px 0.375rem; - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + border-radius: 0.125rem; + display: inline-block; + padding: 4px 0.375rem; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } .t-category-primary { - color: $white; - background-color: $yellow; + color: $white; + background-color: $yellow; } .t-item { - font-size: 0.8125rem; - color: $gray; - background-color: $white; + font-size: 0.8125rem; + color: $gray; + background-color: $white; } .t-btn { - font-size: 0.75rem; - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - background-color: $white; - padding: 7px 0.625rem; - border-radius: $t-round; - &:hover { - text-decoration: none; - } + font-size: 0.75rem; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + background-color: $white; + padding: 7px 0.625rem; + border-radius: $t-round; + &:hover { + text-decoration: none; + } } .t-btn-primary { - background-color: $primary; + background-color: $primary; } .t-btn-danger { + color: $white; + background-color: $red; + &:hover { color: $white; - background-color: $red; - &:hover { - color: $white; - } + } } .t-depth-1 { - margin-left: 1.5625rem; + margin-left: 1.5625rem; } .ticket-breadcrumb { - width: 96%; - margin: auto; - max-width: 980px; - background: none; - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - > li { - text-shadow: none; - font-size: 0.8125rem; - } + width: 96%; + margin: auto; + max-width: 980px; + background: none; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + > li { + text-shadow: none; + font-size: 0.8125rem; + } } // ticket notification .notice { - position: fixed; - top: -5rem; - font-size: 0.8125rem; - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - -webkit-transition: .15s all ease-in-out; - transition: .15s all ease-in-out; - -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1); - margin: 0; + position: fixed; + top: -5rem; + font-size: 0.8125rem; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + -webkit-transition: .15s all ease-in-out; + transition: .15s all ease-in-out; + -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + margin: 0; } .notice-pop { - left: 100px; - padding: 20px 2rem; - color: $white; - background-color: rgba($black, .85); - box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1); - &.in { - top: 60px; - } + left: 100px; + padding: 20px 2rem; + color: $white; + background-color: rgba($black, 0.85); + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + &.in { + top: 60px; + } } .notice-close { - margin-left: 0.625rem; - font-size: 1.0375rem; - vertical-align: middle; - &:hover { - cursor: pointer; - } + margin-left: 0.625rem; + font-size: 1.0375rem; + vertical-align: middle; + &:hover { + cursor: pointer; + } } .notice-bar-on { - #main-wrap { - padding-top: 70px; - } + #main-wrap { + padding-top: 70px; + } } .notice-bar { - position: fixed; - left: 61px; - width: 100%; - color: $white; - background-color: $red; - padding: 10px; - text-indent: 1rem; - &.in { - top: 40px; - } + position: fixed; + left: 61px; + width: 100%; + color: $white; + background-color: $red; + padding: 10px; + text-indent: 1rem; + &.in { + top: 40px; + } } .ticket-wrap { - position: relative; - max-width: 1000px; - width: 96%; - margin: 0 auto; + position: relative; + max-width: 1000px; + width: 96%; + margin: 0 auto; } .ticket-heading-wrap { - background-color: $primary; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topleft: 4px; - -moz-border-radius-topright: 4px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - &.active { - background-color: $red; - } - .ticket-heading { - color: $white; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - font-size: 1.5rem; - margin: 0; - padding: 12px 4rem 12px 1rem; - } + background-color: $primary; + -webkit-border-top-left-radius: 4px; + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topleft: 4px; + -moz-border-radius-topright: 4px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + -webkit-transition: $t-normal all; + transition: $t-normal all; + &.active { + background-color: $red; + } + .ticket-heading { + color: $white; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: normal; + font-size: 1.5rem; + margin: 0; + padding: 12px 4rem 12px 1rem; + } +} + +.ticket-heading-avatar { + line-height: 1.3; + display: inline-block; +} + +.ticket-heading-avatar-name { + font-size: 12px; + font-family: $main-font; } .ticket-meta-wrap { - background-color: $second; - padding: 12px 1rem; - .ticket-meta { - color: #EDF0F1; - float: left; - font-size: 0.8125rem; - @media screen and(max-width: 39.375rem) { - margin-bottom: 10px; - } + background-color: $second; + padding: 12px 1rem; + .ticket-meta { + color: #EDF0F1; + float: left; + font-size: 0.8125rem; + // 700px + @media screen and (max-width: 43.75rem) { + margin-bottom: 10px; } - .ticket-state { - float: right; - > * { - // vertical-align: top; - } + } + .ticket-state { + float: right; + > * { + vertical-align: top; } - .ticket-urgent-btn { - margin-right: 3px; - color: $white; - background-color: $gray; - &.active { - background-color: $red; - color: $white; - } + } + .ticket-urgent-btn { + margin-right: 3px; + color: $white; + background-color: $gray; + &.active { + background-color: $red; + color: $white; } - // 630px - @media screen and (max-width: 39.375rem) { - > div[class^="ticket-"] { - float: none; - } + } + // 700px + @media screen and (max-width: 43.75rem) { + > div[class^="ticket-"] { + float: none; } + } +} + +.ticket-internal-wrap { + text-align: right; } .onoffswitch { - position: relative; - width: 70px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - display: inline-block; + position: relative; + width: 70px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + display: inline-block; + &:hover { + .ticket-tooltip-wrap { + display: block; + } + } +} + +.ticket-tooltip-wrap { + display: none; + position: absolute; + left: 0; + top: -130%; + background-color: rgba($black, 0.8); + color: $white; + z-index: 1000; + padding: 6px 0.625rem; + white-space: nowrap; + font-family: $main-font; } .onoffswitch-checkbox { - display: none; + display: none; } .onoffswitch-label { - display: block; - overflow: hidden; - cursor: pointer; - border-radius: 20px; - margin-bottom: 0; + display: block; + overflow: hidden; + cursor: pointer; + border-radius: 0.125rem; + margin-bottom: 0; } .onoffswitch-inner { - display: block; - width: 200%; - margin-left: -100%; - transition: margin .15s ease-in 0s; + display: block; + width: 200%; + margin-left: -100%; + transition: margin .15s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { - display: block; - float: left; - width: 50%; - height: 30px; - padding: 0; - line-height: 30px; - font-size: 12px; - color: white; - font-family: $main-font; - box-sizing: border-box; + display: block; + float: left; + width: 50%; + height: 28px; + padding: 0; + line-height: 28px; + font-size: 12px; + color: white; + font-family: $main-font; + box-sizing: border-box; } .onoffswitch-inner:before { - content: "ON"; - padding-left: 10px; - background-color: $red; - color: $white; + content: "ON"; + padding-left: 10px; + background-color: $red; + color: $white; } .onoffswitch-inner:after { - content: "OFF"; - padding-right: 10px; - background-color: $gray; - color: $white; - text-align: right; + content: "OFF"; + padding-right: 10px; + background-color: $subtle-black; + color: $white; + text-align: right; } .onoffswitch-switch { - display: block; - width: 18px; - height: 18px; - margin: 6px; - background: $white; - position: absolute; - top: 0; - bottom: 0; - right: 40px; - border-radius: 50%; - transition: all .15s ease-in 0s; + display: block; + width: 18px; + height: 18px; + margin: 5px 6px; + background: $white; + position: absolute; + top: 0; + bottom: 0; + right: 40px; + border-radius: 0.125rem; + transition: all .15s ease-in 0s; } +.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-inner, .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { - margin-left: 0; + margin-left: 0; } +.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-switch, .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { - right: 0px; + right: 0px; } .ticket-action { - position: absolute; - right: 1.4rem; - top: 1.4rem; - transition: .3s all; - .dropdown-menu { - top: 120%; - left: auto; - right: 0; - padding: 15px 0; - border: none; - border-radius: 0.125rem; - min-width: 100px; - .t-btn { - i { - margin-right: 0.3125rem; - } - } - > li { - > a { - padding: 3px 0.75rem; - } - } - li { - > a { - &:hover { - background-color: $second; - background-image: none; - } - } - } - li { - > .ticket-delete { - &:hover { - background-color: $red; - } - } - > .ticket-close { - &:hover { - background-color: $yellow; - } - } - } - } -} - -.ticket-dropdown-icon { - color: rgba($white, .5); - font-size: 1.2rem; - text-align: center; - padding: 2px 0.3125rem; - border-radius: 0.25rem; - border: 3px solid rgba($white, .5); - transition: .2s all; - &:hover { - color: $white; - border-color: $white; - border-radius: 50%; - } -} - -.ticket-category { - position: relative; -} - -.ticket-category-dropdown { - text-transform: uppercase; - color: $white; - &:hover { - color: $white; - } -} - -.ticket-category-select { + position: absolute; + right: 1.4rem; + top: 1.4rem; + transition: .3s all; + .dropdown-menu { top: 120%; left: auto; right: 0; padding: 15px 0; border: none; border-radius: 0.125rem; - min-width: 140px; + min-width: 100px; .t-btn { - i { - margin-right: 0.3125rem; - } + i { + margin-right: 0.3125rem; + } } > li { - > a { - padding: 3px 0.75rem; - } + > a { + padding: 3px 0.75rem; + } } li { - > a { - &:hover { - background-color: $second; - background-image: none; - } + > a { + font-family: $main-font; + &:hover { + background-color: $second; + background-image: none; } + } } li { - > .ticket-delete { - &:hover { - background-color: $red; - } + > .ticket-delete { + &:hover { + background-color: $red; } - > .ticket-close { - &:hover { - background-color: $yellow; - } + } + > .ticket-close { + &:hover { + background-color: $yellow; } + } } + } +} + +.ticket-dropdown-icon { + color: rgba($white, 0.5); + font-size: 1.2rem; + text-align: center; + padding: 2px 0.3125rem; + border-radius: 0.25rem; + border: 3px solid rgba($white, 0.5); + transition: .2s all; + &:hover { + color: $white; + border-color: $white; + border-radius: 50%; + } +} + +.ticket-category { + position: relative; +} + +.ticket-category-dropdown { + text-transform: uppercase; + color: $white; + &:hover { + text-decoration: none; + color: $white; + } +} + +.ticket-category-select { + top: 120%; + left: auto; + right: 0; + padding: 15px 0; + border: none; + border-radius: 0.125rem; + min-width: 140px; + .t-btn { + i { + margin-right: 0.3125rem; + } + } + > li { + > a { + padding: 3px 0.75rem; + } + } + li { + > a { + &:hover { + background-color: $second; + background-image: none; + } + } + } + li { + > .ticket-delete { + &:hover { + background-color: $red; + } + } + > .ticket-close { + &:hover { + background-color: $yellow; + } + } + } } .ticket-query-wrap { - -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1); - box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1); - background-color: $white; - padding: 10px 1.875rem 30px 1.875rem; - margin-bottom: 30px; + -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + background-color: $white; + padding: 10px 1.875rem 30px 1.875rem; + margin-bottom: 30px; } .ticket-query { - padding: 15px 0 20px 0; - font-size: 0.9375rem; + padding: 15px 0 20px 0; + font-size: 0.9375rem; } .ticket-query-wrap:first-child { - -webkit-border-bottom-right-radius: 0.25rem; - -webkit-border-bottom-left-radius: 0.25rem; - -moz-border-radius-bottomright: 0.25rem; - -moz-border-radius-bottomleft: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + -webkit-border-bottom-right-radius: 0.25rem; + -webkit-border-bottom-left-radius: 0.25rem; + -moz-border-radius-bottomright: 0.25rem; + -moz-border-radius-bottomleft: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .ticket-query-wrap:nth-child(1n+2) { - border-radius: 0.25rem; + border-radius: 0.25rem; } // response .ticket-response { - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - border: 1px solid lighten($gray, 40%); + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + border: 1px solid lighten($gray, 40%); } .ticket-response-heading { - background-color: $second; - outline: 1px solid $second; - display: block; - padding: 6px 0.625rem; - color: $white; - font-size: 0.9375rem; - margin: 0 0 20px; - cursor: pointer; - -webkit-transition: .15s all; - transition: .15s all; - &.collapsed { - margin: 0; - background-color: $gray; - outline-color: $gray; - &:hover { - background-color: $second; - outline-color: $second; - } - } - .ticket-response-heading-collapse { - font-size: 1.2rem; - padding: 2px 5px; + background-color: $second; + outline: 1px solid $second; + display: block; + padding: 6px 0.625rem; + color: $white; + font-size: 0.9375rem; + margin: 0 0 20px; + // cursor: pointer; + -webkit-transition: .15s all; + transition: .15s all; + &.collapsed { + margin: 0; + background-color: $gray; + outline-color: $gray; + &:hover { + background-color: $second; + outline-color: $second; } + } + .ticket-response-heading-collapse { + font-size: 1.2rem; + padding: 2px 5px; + } } .ticket-response-heading-icon { - margin-right: 0.5rem; + margin-right: 0.5rem; } .ticket-response-wrap { - &.collapsed { - height: 0; - overflow: hidden; - } + &.collapsed { + height: 0; + overflow: hidden; + } } .ticket-response-item { - margin: 35px auto; - width: 90%; + margin: 35px auto; + width: 90%; } .ticket-response-meta { - margin-bottom: 10px; - overflow: hidden; + margin-bottom: 10px; + overflow: hidden; } .ticket-response-author { - font-size: 1.25rem; - display: inline-block; - margin-right: 10px; - color: $black; + font-size: 1.25rem; + display: inline-block; + margin-right: 10px; + color: $black; } .ticket-response-avatar { - width: 38px; - height: 38px; - border-radius: 50%; - margin-right: 0.3125rem; + width: 38px; + height: 38px; + border-radius: 50%; + margin-right: 0.3125rem; } .ticket-response-created-date { - display: inline-block; - font-size: 0.8125rem; - font-style: italic; - color: $gray; - border-bottom: 1px dotted darken($light-gray, 5%); + display: inline-block; + font-size: 0.8125rem; + font-style: italic; + color: $gray; + border-bottom: 1px dotted darken($light-gray, 5%); +} + +.ticket-response-delete-wrap { + float: right; +} + +.ticket-response-delete { + font-family: $main-font; + color: $gray; + &:hover { + text-decoration: none; + color: $second; + } } .ticket-response-content { - border: 1px solid lighten($gray, 40%); - padding: 15px 1.5rem; - border-radius: 0.125rem; - font-size: 0.9375rem; - line-height: 1.6; - overflow: auto; + border: 1px solid lighten($gray, 40%); + padding: 15px 1.5rem; + border-radius: 0.125rem; + font-size: 0.9375rem; + line-height: 1.6; + overflow: auto; + &.in-house { + background-color: lighten($light-gray, 3%); + } +} + +.ticket-internal-response-wrap { + margin-top: 20px; +} + +.ticket-internal-response { + display: inline-block; + vertical-align: top; + margin: 0 5px 10px 0; + height: 44px; + line-height: 44px; + background: $gray; + color: $white; + padding: 0 0.625rem; + font-family: $main-font; + font-size: 14px; + border-radius: $t-round; +} + +.ticket-tag-member { + display: inline-block; + vertical-align: top; } .ticket-inhouse-heading { - display: block; - font-size: 12px; + display: block; + font-size: 12px; } // Override select2 styles, I need this evil power #main-wrap { - .select2-container-multi { - margin-right: 0.9375rem; - min-width: 200px; - - .select2-choices { - padding: 0; - border-radius: $t-round; - - .select2-search-field { - input { - padding: 10px 5px; - } - } - } - - .select2-search-choice { - padding: 10px 1.75rem 10px 0.7rem; - border-color: lighten($gray, 20%); - background: $white; - - > div { - &:before { - content: "\F007"; - font-family: FontAwesome; - display: inline-block; - font-size: 0.9375rem; - color: $second; - margin: 0 0.5rem 0 0; - } - } - } - - .select2-search-choice-close { - right: 15px; - left: auto; - - &:before { - content: "\f057"; - font-family: FontAwesome; - position: absolute; - cursor: pointer; - left: 6px; - top: 6px; - font-size: 0.9375rem; - color: $gray; - } - - &:hover { - &:before { - color: $red; - } - } + .select2-container-multi { + margin-right: 0.9375rem; + min-width: 200px; + .select2-choices { + border-radius: $t-round; + background-image: none; + .select2-search-field { + input { + padding: 10px 5px; } + } } + .select2-search-choice { + padding: 10px 1.75rem 10px 0.7rem; + border-color: lighten($gray, 20%); + background: $white; + } + .select2-search-choice-close { + right: 15px; + left: auto; + &:before { + content: "\f057"; + font-family: FontAwesome; + position: absolute; + cursor: pointer; + left: 6px; + top: 6px; + font-size: 0.9375rem; + color: $gray; + } + &:hover { + &:before { + color: $red; + } + } + } + } } .select2-result-label { - > span { - white-space: nowrap; - } + > span { + white-space: nowrap; + } } - .fileupload { - .thumbnail { - max-width: 60%; - height: auto; - } + .thumbnail { + max-width: 60%; + height: auto; + } } // editor .ticket-editor { - padding: 10px 1.8rem 20px; + padding: 10px 1.8rem 20px; +} + +.ticket-submit-btn { + font-size: 14px; + padding: 8px 1rem; + font-family: FontAwesome, Roboto; } // Go back top .go-back-top { - background: $gray; - color: $white; - border-radius: 4px; - width: 50px; - height: 50px; - line-height: 50px; - text-align: center; - text-transform: uppercase; - cursor: pointer; - position: fixed; - right: 1rem; - bottom: 1rem; - -webkit-transition: .15s all; - transition: .15s all; - &:hover { - border-radius: 50%; - background-color: $primary; - } + background: $gray; + color: $white; + border-radius: 4px; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + text-transform: uppercase; + cursor: pointer; + position: fixed; + right: 1rem; + bottom: 1rem; + -webkit-transition: .15s all; + transition: .15s all; + &:hover { + border-radius: 50%; + background-color: $primary; + } } // ticket table .ticket-table { - td { - white-space: nowrap; - } + td { + white-space: nowrap; + } } // create ticket .ticket-create-form { - .ticket-create-subject { - width: 77%; - margin-right: 0.625rem; - height: 30px; - } - .ticket-create-type { - width: 20%; - height: 40px; - } + .ticket-create-subject { + width: 77%; + margin-right: 0.625rem; + height: 30px; + } + .ticket-create-type { + width: 20%; + height: 40px; + } } .scroll-element { - border: 5px solid #489ad8; - -webkit-transition: border-color 1s linear; - transition: border-color 1s linear; + border: 20px solid #fff36f; + padding: 0.625rem; + border-radius: 0.25rem; + -webkit-transition: border-color $t-normal linear; + transition: border-color $t-normal linear; +} + +// harry css starts here +.t-avatar { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.6; + -webkit-transition: all 1s linear; + transition: all 1s linear; + &.read { + -webkit-filter: grayscale(0); + filter: grayscale(0); + opacity: 1; + } } diff --git a/app/controllers/admin/tickets_controller.rb b/app/controllers/admin/tickets_controller.rb index b93e21d..83bbeef 100644 --- a/app/controllers/admin/tickets_controller.rb +++ b/app/controllers/admin/tickets_controller.rb @@ -197,6 +197,18 @@ class Admin::TicketsController < OrbitAdminController end end + def mark_response_read + response = TicketQueryResponse.find(params[:response_id]) rescue nil + if !response.nil? + response.read_by << current_user.id.to_s if !response.read_by.include?(current_user.id.to_s) + response.save + data = {"success" => true, "user_id" => current_user.id.to_s} + else + data = {"success" => false} + end + render :json => data.to_json + end + def tickets_by_category @table_fields = [:ticket_number, :site_name, :subject, :created_at, :tags, :status, :taken_by, :urgent] statuses = params["type"] == "history" ? ["closed"] : ["open","commenced"] diff --git a/app/models/ticket_query_response.rb b/app/models/ticket_query_response.rb index 9175db1..99b40c7 100644 --- a/app/models/ticket_query_response.rb +++ b/app/models/ticket_query_response.rb @@ -6,6 +6,7 @@ class TicketQueryResponse field :internal_response, type: Boolean, :default => false field :response_by, type: BSON::ObjectId field :user_tags, type: Array, default: [] + field :read_by, type: Array, default: [] scope :for_clients, ->{ where(:internal_response.in => [nil, false]) } diff --git a/app/views/admin/tickets/_query.html.erb b/app/views/admin/tickets/_query.html.erb index 20daf3c..40b64e7 100644 --- a/app/views/admin/tickets/_query.html.erb +++ b/app/views/admin/tickets/_query.html.erb @@ -14,25 +14,30 @@
- - - Internal Response -
-

Tag member

- +
+
+ + + Internal Response +
+
+ + +
+ - +
<% end %>
- \ No newline at end of file + diff --git a/app/views/admin/tickets/_response.html.erb b/app/views/admin/tickets/_response.html.erb index cf512d4..ca97823 100644 --- a/app/views/admin/tickets/_response.html.erb +++ b/app/views/admin/tickets/_response.html.erb @@ -14,24 +14,33 @@
<% dt = DateTime.parse(response.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
-

- <%= response.internal_response ? "Inhouse" : "" %> -

-
- <% response.user_tags.each do |u| - user = User.find(u) rescue nil - if !user.nil? - if user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png" - avatar = "/assets/thumb_person.png" - else - avatar = user.member_profile.avatar.thumb.url - end - end %> - - <% end %> +
+ + + Delete + +
+ +
+
+ <% response.user_tags.each do |u| + user = User.find(u) rescue nil + if !user.nil? + if user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png" + avatar = "/assets/thumb_person.png" + else + avatar = user.member_profile.avatar.thumb.url + end + end %> +
+ " src="<%= avatar %>" data-avatar-id="<%= user.id.to_s %>"> + <%= user.name %> +
+ <% end %> +
-
+
"> <%= response.response.html_safe %>
\ No newline at end of file diff --git a/app/views/admin/tickets/_search_form.html.erb b/app/views/admin/tickets/_search_form.html.erb index 9a6e5ed..5b96088 100644 --- a/app/views/admin/tickets/_search_form.html.erb +++ b/app/views/admin/tickets/_search_form.html.erb @@ -1,5 +1,4 @@ -
- +

Search tickets @@ -22,4 +21,4 @@

<% end %> -
\ No newline at end of file + diff --git a/app/views/admin/tickets/_ticket.html.erb b/app/views/admin/tickets/_ticket.html.erb index 94e6150..6bca2b0 100644 --- a/app/views/admin/tickets/_ticket.html.erb +++ b/app/views/admin/tickets/_ticket.html.erb @@ -19,7 +19,10 @@
<% if ticket.is_urgent? %> - Urgent + + + Urgent + <% end %> diff --git a/app/views/admin/tickets/index.html.erb b/app/views/admin/tickets/index.html.erb index a1703f8..b80d1c4 100644 --- a/app/views/admin/tickets/index.html.erb +++ b/app/views/admin/tickets/index.html.erb @@ -11,7 +11,7 @@ Urgent Tickets <% @categories.each do |category| %> - <% if !@urgent_tickets[category].nil? %> + <% if !@urgent_tickets[category].blank? %>

diff --git a/app/views/admin/tickets/search.html.erb b/app/views/admin/tickets/search.html.erb index 27a66ad..ea86362 100644 --- a/app/views/admin/tickets/search.html.erb +++ b/app/views/admin/tickets/search.html.erb @@ -8,6 +8,7 @@ <% @categories.each do |category| %>

+ <%= category.title %>

<%= render :partial => "ticket", :collection => @tickets[category] %> diff --git a/app/views/admin/tickets/show.html.erb b/app/views/admin/tickets/show.html.erb index cc29b92..2ca95d4 100644 --- a/app/views/admin/tickets/show.html.erb +++ b/app/views/admin/tickets/show.html.erb @@ -6,10 +6,10 @@ <% content_for :page_specific_javascript do %> <%= javascript_include_tag "lib/jquery.form.js" %> <%= javascript_include_tag "validator" %> - <%= javascript_include_tag "select2/select2.min" %> + <%= javascript_include_tag "select2/select2.min" %> <% end %> <% if !@ticket .nil? %> -<% case @ticket.status +<% case @ticket.status when "open" badge_class = "t-status-open" when "closed" @@ -18,17 +18,32 @@ badge_class = "t-status-processing" end %> - +
+ + + Back to Dashboard + + + + <%= @ticket.registered_site.title %> + +
" >

#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %> <% if !@ticket.taken_by.nil? %> <% user = User.find(@ticket.taken_by) %> - + <% if user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png" + avatar = "/assets/thumb_person.png" + else + avatar = user.member_profile.avatar.thumb.url + end + %> +
+ + <%= user.name %> +
<% end %>

@@ -79,7 +94,7 @@ <% end %> <% end %>
  • - + Delete @@ -91,27 +106,28 @@
    - + <%= !@ticket.ticket_creater_name.nil? ? @ticket.ticket_creater_name : @ticket.ticket_creater_id %> - + <% dt = DateTime.parse(@ticket.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
    <% if @ticket.status != "closed" %> - " id="toggle-urgent"> - - Urgent - + +
    + + " id="myonoffswitch" data-url="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent">
    - -->     + <% end %> @@ -134,7 +150,7 @@
    -
    +
    • @@ -159,7 +175,7 @@ <% end %>
    <% else %> -
    +
    Error in fetching ticket.
    <% end %> @@ -205,8 +221,18 @@ $(document).ready(function(){ el = $("div[data-scroll-id=" + item + "]"); $('html, body').scrollTop(el.offset().top - 100); el.addClass("scroll-element"); + $.ajax({ + url : "/admin/comments/read", + dataType : "json", + type : "post", + data : {"response_id" : item.split("_")[1]} + }).done(function(data){ + if(data.success){ + el.find("img[data-avatar-id="+ data.user_id +"]").addClass("read"); + } + }) el.one("mouseover",function(){ - el.css( "border-color", "rgba(0,0,0,0)"); + el.css('border-color', 'transparent'); }) } @@ -225,6 +251,7 @@ $(document).ready(function(){ }, placeholder: "Add Members" }); + }) $(".reopen-back-btn").on("click",function(){ for (instance in CKEDITOR.instances) { @@ -237,7 +264,22 @@ $(document).ready(function(){ }else{ return false; } - }) + }); + + + function switchTooltip() { + var $switch = $('.onoffswitch'); + var $input = $switch.children('input'); + var $tooltip = $switch.find('.ticket-tooltip-wrap'); + var activeCls = 'active'; + + if ($input.hasClass(activeCls)) { + $tooltip.text('This ticket is marked urgent, click to unmark'); + } else { + $tooltip.text('Click to mark this ticket urgent'); + } + + } $(".ticket-category-select-option").on("click",function(){ var el = $(this); @@ -245,34 +287,38 @@ $(document).ready(function(){ window.location.href = window.location.pathname + "/changecategory?category_id=" + el.data("category-id"); } return false; - }) - $("#toggle-urgent").on("click",function(){ - var el = $(this); - var mark_urgent = !el.hasClass("active"); + }); + + switchTooltip(); + + $("#myonoffswitch").on("click",function(){ + var $el = $(this); + var mark_urgent = !$el.hasClass("active"); $.ajax({ - url : el.attr("href"), - type : "post", - data : {"mark_urgent" : mark_urgent}, + url : $el.attr("data-url"), + type : "POST", + data : {"mark_urgent": mark_urgent}, dataType : "json" }).done(function(response){ if(response.success){ if(mark_urgent){ if(response.can_make_urgent){ $("#ticket-urgent-marker").addClass('active'); - el.addClass("active"); + $el.addClass("active"); }else{ alert("Urgent quota for this category is already over."); } }else{ $("#ticket-urgent-marker").removeClass('active'); - el.removeClass("active"); + $el.removeClass("active"); } + + switchTooltip(); } }) return false; }) + + - - - diff --git a/config/routes.rb b/config/routes.rb index a79eadb..5149815 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -15,6 +15,7 @@ Rails.application.routes.draw do post "ticket/submit_response" => 'tickets#submit_response' get "tickets/category/:category_id" => 'tickets#tickets_by_category' get "tickets/my_tickets" => 'tickets#my_tickets' + post "comments/read" => 'tickets#mark_response_read' resources :tickets do get "start" get "leave"