Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'develop' of github.com:martini/zammad into develop

Browse source
This commit is contained in:
Martin Edenhofer 2016-02-16 16:41:51 +01:00
commit 0c221925a8
11 changed files with 269 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/assets/javascripts/app/controllers/_channel/chat.coffee
View file

@ -3,16 +3,15 @@ class App.ChannelChat extends App.Controller
'change .js-params': 'updateParams'
'input .js-params': 'updateParams'
'submit .js-demo-head': 'onUrlSubmit'
'blur .js-testurl-input': 'changeDemoWebsite'
'click .js-selectBrowserWidth': 'selectBrowserWidth'
'click .js-swatch': 'usePaletteColor'
'click .js-toggle-chat': 'toggleChat'
'click .js-chatSetting': 'toggleChatSetting'
'click .js-eyedropper': 'pickColor'
elements:
'.js-browser': 'browser'
'.js-browserBody': 'browserBody'
'.js-iframe': 'iframe'
'.js-screenshot': 'screenshot'
'.js-website': 'website'
'.js-chat': 'chat'
@ -25,6 +24,7 @@ class App.ChannelChat extends App.Controller
'.js-palette': 'palette'
'.js-color': 'colorField'
'.js-chatSetting input': 'chatSetting'
'.js-eyedropper': 'eyedropper'
apiOptions: [
{
@ -105,6 +105,7 @@ class App.ChannelChat extends App.Controller
isOpen: true
browserWidth: 1280
previewUrl: ''
previewScale: 1
constructor: ->
super
@ -155,6 +156,7 @@ class App.ChannelChat extends App.Controller
release: ->
$(window).off 'resize.chat-designer'
@website.off('click.eyedropper')
selectBrowserWidth: (event) =>
tab = $(event.target).closest('[data-value]')
@ -177,6 +179,7 @@ class App.ChannelChat extends App.Controller
transform: ''
width: ''
height: ''
@previewScale = 1
return if @browserWidth is 'fit'
@ -184,12 +187,12 @@ class App.ChannelChat extends App.Controller
@chat.addClass('is-fullscreen').css 'transform', "translateY(#{ @getChatOffset(true) }px)"
@browser.css('width', "#{ width }px")
else
percentage = @el.width()/width
@chat.css 'transform', "translateY(#{ @getChatOffset() * percentage }px) scale(#{ percentage })"
@previewScale = @el.width()/width
@chat.css 'transform', "translateY(#{ @getChatOffset() * @previewScale }px) scale(#{ @previewScale })"
@website.css
transform: "scale(#{ percentage })"
width: @el.width() / percentage
height: @browserBody.height() / percentage
transform: "scale(#{ @previewScale })"
width: @el.width() / @previewScale
height: @browserBody.height() / @previewScale
getChatOffset: (fullscreen) ->
return 0 if @isOpen
@ -217,8 +220,6 @@ class App.ChannelChat extends App.Controller
@palette.empty()
@screenshot.attr('src', '')
@website.attr('data-mode', 'iframe')
@iframe.attr('src', @url)
$.ajax
url: 'https://images.zammad.com/api/v1/webpage/combined'
@ -229,12 +230,9 @@ class App.ChannelChat extends App.Controller
dataType: 'json'
renderDemoWebsite: (data) =>
imageSource = data['data_url']
@_screenshotSource = data['data_url']
if imageSource
@screenshot.attr 'src', imageSource
@iframe.attr('src', '')
@website.attr('data-mode', 'screenshot')
@screenshot.attr 'src', @_screenshotSource
@renderPalette data['palette']
@ -268,6 +266,40 @@ class App.ChannelChat extends App.Controller
@colorField.val code
@updateParams()
pickColor: ->
return if !@_screenshotSource
if @_pickingColor
@_pickingColor = false
@website
.off('click.eyedropper')
.removeClass('is-picking')
@eyedropper.removeClass('is-active')
else
@_pickingColor = true
@website
.on('click.eyedropper', @onColorPicked)
.addClass('is-picking')
@eyedropper.addClass('is-active')
onColorPicked: (event) =>
x = event.pageX - @website.offset().left
y = event.pageY - @website.offset().top
image = new Image()
image.src = @_screenshotSource
canvas = document.createElement('canvas')
ctx = canvas.getContext('2d')
canvas.width = image.width
canvas.height = image.height
ctx.drawImage(image, 0, 0, @previewScale * canvas.width, @previewScale * canvas.height)
pixels = ctx.getImageData(x, y, 1, 1).data
@colorField.val("rgb(#{pixels.slice(0,3).join(',')})").trigger('change')
toggleChat: =>
@chat.toggleClass('is-open')
@isOpen = @chat.hasClass('is-open')

10
app/assets/javascripts/app/views/channel/chat.jst.eco
View file

@ -38,7 +38,6 @@
</form>
<div class="browser-body js-browserBody">
<div class="browser-website js-website">
<iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
<img class="js-screenshot">
</div>
<style>@import "/assets/chat/chat.css";</style>
@ -97,8 +96,13 @@
<label for="form-chat-background"><%- @T('Background color') %></label>
<div class="align-right horizontal js-palette"></div>
</div>
<div class="controls">
<input class="js-color" type="text" id="form-chat-background" name="background" value="">
<div class="controls controls--button">
<input class="js-color" type="text" id="form-chat-background" name="background">
<div class="controls-button js-eyedropper">
<div class="controls-button-inner u-clickable">
<%- @Icon('eyedropper') %>
</div>
</div>
</div>
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
</div>

15
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -2,6 +2,21 @@
<h1>Inputs</h1>
<div style="max-width: 500px">
<h2>Color</h2>
<div class="color form-group">
<div class="formGroup-label">
<label for="background-color"><%- @T('Background color') %></label>
</div>
<div class="controls controls--button">
<input type="text" id="background-color" value="">
<div class="controls-button">
<div class="controls-button-inner u-clickable">
<%- @Icon('eyedropper') %>
</div>
</div>
</div>
</div>
<h2>Time</h2>
<p>A time of the day</p>
<input type="text" value="14:40" class="time js-timepicker1">

4
app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
View file

@ -103,13 +103,13 @@
<div class="merge-target">
<label>Email</label>
<div class="merge-value">
<div class="primary-email-switch-holder">
<div class="controls-button">
<span class="primary-email-switch-label">nicole.braun@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-1" checked><label for="input-1">main</label>
</div>
</div>
<div class="merge-value">
<div class="primary-email-switch-holder">
<div class="controls-button">
<span class="primary-email-switch-label">nicole.mueller@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-2"><label for="input-2">main</label>
</div>

20
app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco
View file

@ -38,11 +38,13 @@
<span class="formGroup-metaControl js-addEmail" title="Add Email Address">+</span>
</div>
<div class="controls controls--emailSwitch">
<div class="controls controls--button">
<input class="form-control" id="User_510389_email1" name="email" required="" type="email" value="">
<div class="primary-email-switch-holder">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
<label for="User_510389_email1_switch">primary</label>
<div class="controls-button">
<div class="controls-button-inner">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
<label for="User_510389_email1_switch">primary</label>
</div>
</div>
</div>
</div>
@ -53,11 +55,13 @@
<span class="formGroup-metaControl js-removeEmail" title="Remove Email Address">&times;</span>
</div>
<div class="controls controls--emailSwitch">
<div class="controls controls--button">
<input class="form-control" id="User_510389_email2" name="email" required="" type="email" value="">
<div class="primary-email-switch-holder">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
<label for="User_510389_email2_switch">primary</label>
<div class="controls-button">
<div class="controls-button-inner">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
<label for="User_510389_email2_switch">primary</label>
</div>
</div>
</div>
</div>

1
app/assets/stylesheets/svg-dimensions.css
View file

@ -17,6 +17,7 @@
.icon-dropdown-list { width: 19px; height: 14px; }
.icon-email-button { width: 29px; height: 22px; }
.icon-email { width: 17px; height: 17px; }
.icon-eyedropper { width: 17px; height: 17px; }
.icon-facebook-button { width: 29px; height: 22px; }
.icon-facebook { width: 17px; height: 17px; }
.icon-full-logo { width: 175px; height: 50px; }

351
app/assets/stylesheets/zammad.scss
View file

@ -1506,190 +1506,198 @@ input.time.time--12 {
width: 7.5ch;
}
.tokenfield.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.tokenfield.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.richtext.form-control {
padding-bottom: 28px;
}
.richtext.form-control {
padding-bottom: 28px;
}
.richtext.form-control [contenteditable] {
height: auto;
min-height: 82px;
background: none;
}
.richtext.form-control [contenteditable] {
height: auto;
min-height: 82px;
background: none;
}
.richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -28px;
padding: 25px 20px 21px 72px;
position: relative;
line-height: 1;
}
.richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -28px;
padding: 25px 20px 21px 72px;
position: relative;
line-height: 1;
}
textarea.form-control {
height: 118px;
}
textarea.form-control {
height: 118px;
}
select.form-control:not([multiple]) {
padding-left: 10px;
padding-right: 34px;
word-wrap: normal;
}
select.form-control:not([multiple]) {
padding-left: 10px;
padding-right: 34px;
word-wrap: normal;
}
.form-control.is-hidden {
display: none;
}
.form-control.is-hidden {
display: none;
}
.form-control[disabled], .form-control.is-disabled {
cursor: not-allowed;
background-color: #fff;
color: #d5d5d5;
opacity: 1;
}
.form-control[disabled], .form-control.is-disabled {
cursor: not-allowed;
background-color: #fff;
color: #d5d5d5;
opacity: 1;
}
.form-control.form-control--borderless {
border: none;
padding: 0;
line-height: inherit;
height: auto;
&:focus {
box-shadow: none;
}
}
.form-control + .icon-arrow-down,
.dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
margin-top: -3px;
fill: black;
opacity: 0.39;
width: 13px;
height: 7px;
@extend .u-unclickable;
}
/*
Firefox only hack
-----------------
Firefox below version 35 doesn't allow us to
hide the dropdown arrow but we want to replace
it with our own icon. So we have to hide our own
icon in Firefox versions under 35.
The class is set via Javascript
*/
html.ff-lt-35 .form-control + .icon-arrow-down,
html.ff-lt-35 .dropdown-arrow {
display: none;
}
select::-ms-expand {
display: none;
}
.has-error .form-control,
.has-error .form-control:focus,
.has-error .form-control.focus {
.form-control.form-control--borderless {
border: none;
padding: 0;
line-height: inherit;
height: auto;
&:focus {
box-shadow: none;
border-color: red !important;
}
}
.form-control + .icon-arrow-down,
.dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
margin-top: -3px;
fill: black;
opacity: 0.39;
width: 13px;
height: 7px;
@extend .u-unclickable;
}
/*
Firefox only hack
-----------------
Firefox below version 35 doesn't allow us to
hide the dropdown arrow but we want to replace
it with our own icon. So we have to hide our own
icon in Firefox versions under 35.
The class is set via Javascript
*/
html.ff-lt-35 .form-control + .icon-arrow-down,
html.ff-lt-35 .dropdown-arrow {
display: none;
}
select::-ms-expand {
display: none;
}
.has-error .form-control,
.has-error .form-control:focus,
.has-error .form-control.focus {
box-shadow: none;
border-color: red !important;
}
input.has-error {
box-shadow: none;
border-color: red !important;
}
.help-inline:not(:empty) {
color: red;
padding: 2px;
font-size: 13px;
}
/* use on input[type=radio] */
.primary-email-switch {
display: none;
& + label {
font-size: 11px;
color: #DBDBDB;
cursor: pointer;
margin: 0;
}
input.has-error {
box-shadow: none;
border-color: red !important;
&:checked + label {
color: $highlight-color;
}
}
.help-inline:not(:empty) {
color: red;
padding: 2px;
font-size: 13px;
}
.primary-email-switch-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* use on input[type=radio] */
.primary-email-switch {
display: none;
.primary-email-switch + label {
align-self: stretch;
padding: 0 5px;
display: flex;
align-items: center;
}
& + label {
font-size: 11px;
color: #DBDBDB;
cursor: pointer;
margin: 0;
}
&:checked + label {
color: $highlight-color;
}
}
.primary-email-switch-holder {
position: relative;
display: flex;
.controls--button {
display: flex;
input,
.form-control {
flex: 1;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.primary-email-switch-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.primary-email-switch + label {
align-self: stretch;
padding: 0 5px;
display: flex;
align-items: center;
}
}
.controls--emailSwitch {
display: flex;
.form-control {
flex: 1;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:focus + .controls-button {
.controls-button-inner {
border-color: hsl(200,71%,59%);
}
&:focus + .primary-email-switch-holder {
label {
border-color: hsl(200,71%,59%);
}
/*
/*
fake the form-control outline
fake the form-control outline
*/
&:before {
content: "";
position: absolute;
left: 0;
top: -3px;
right: -3px;
bottom: -3px;
background: hsl(201,62%,90%);
border-radius: 0 7px 7px 0;
}
*/
&:before {
content: "";
position: absolute;
left: 0;
top: -3px;
right: -3px;
bottom: -3px;
background: hsl(201,62%,90%);
border-radius: 0 7px 7px 0;
}
}
.primary-email-switch-holder label {
padding: 0 9px;
background: white;
position: relative;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 0 3px 3px 0;
}
}
}
.controls-button {
position: relative;
display: flex;
&.is-active .icon {
fill: $highlight-color;
}
}
.controls-button-inner {
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
background: white;
position: relative;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 0 3px 3px 0;
}
.searchfield {
position: relative;
@ -7642,24 +7650,11 @@ output {
height: 100%;
transform-origin: left top;
overflow: hidden;
&[data-mode=screenshot] iframe,
&[data-mode=iframe] img {
display: none;
&.is-picking {
cursor: image_url("/assets/images/eyedropper.gif") 0 15, auto;
}
}
iframe {
position: absolute;
border: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 0 0 5px 5px;
pointer-events: none;
}
img {
vertical-align: bottom;

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

BIN
public/assets/images/eyedropper.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 90 B

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 54 KiB

12
public/assets/images/icons/eyedropper.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<title>eyedropper</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="eyedropper" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M10.2240424,7.9513151 L3.86040601,14.3149515 L4.18181818,14.1818182 L3.27272727,14.1818182 C3.15217432,14.1818182 3.03655891,14.2297077 2.9513151,14.3149515 L2.04222419,15.2240424 L2.68504854,15.2240424 L1.77595763,14.3149515 L1.77595763,14.9577758 L2.68504854,14.0486849 C2.77029235,13.9634411 2.81818182,13.8478257 2.81818182,13.7272727 L2.81818182,12.8181818 L2.68504854,13.139594 L9.0486849,6.77595763 L10.2240424,7.9513151 Z M13.4058606,1.13313328 L10.2240424,4.31495146 L10.8668667,4.31495146 L9.95777581,3.40586055 C9.78026477,3.22834951 9.4924625,3.22834951 9.31495146,3.40586055 L7.49676964,5.22404237 C7.3192586,5.40155341 7.3192586,5.68935568 7.49676964,5.86686672 L8.40586055,6.77595763 L8.40586055,6.13313328 L2.04222419,12.4967696 C1.95698038,12.5820135 1.90909091,12.6976289 1.90909091,12.8181818 L1.90909091,13.7272727 L2.04222419,13.4058606 L1.13313328,14.3149515 C0.95562224,14.4924625 0.95562224,14.7802648 1.13313328,14.9577758 L2.04222419,15.8668667 C2.21973523,16.0443778 2.5075375,16.0443778 2.68504854,15.8668667 L3.59413945,14.9577758 L3.27272727,15.0909091 L4.18181818,15.0909091 C4.30237113,15.0909091 4.41798655,15.0430196 4.50323036,14.9577758 L10.8668667,8.59413945 L10.2240424,8.59413945 L11.1331333,9.50323036 C11.3106443,9.6807414 11.5984466,9.6807414 11.7759576,9.50323036 L13.5941394,7.68504854 C13.7716505,7.5075375 13.7716505,7.21973523 13.5941394,7.04222419 L12.6850485,6.13313328 L12.6850485,6.77595763 L15.8668667,3.59413945 C16.0443778,3.4166284 16.0443778,3.12882614 15.8668667,2.9513151 L14.0486849,1.13313328 C13.8711739,0.95562224 13.5833716,0.95562224 13.4058606,1.13313328 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB