Browse Source

Add and use `no-touch-actions` class

pull/1397/head
Artur Arseniev 8 years ago
parent
commit
589e8bdaa9
  1. 2
      dist/css/grapes.min.css
  2. 10
      src/dom_components/model/Component.js
  3. 5
      src/style_manager/view/LayerView.js
  4. 18
      src/styles/scss/main.scss

2
dist/css/grapes.min.css

File diff suppressed because one or more lines are too long

10
src/dom_components/model/Component.js

@ -547,7 +547,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
* @private
*/
initToolbar() {
var model = this;
const { em } = this;
const model = this;
const ppfx = (em && em.getConfig('stylePrefix')) || '';
if (!model.get('toolbar')) {
var tb = [];
if (model.collection) {
@ -558,7 +561,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
}
if (model.get('draggable')) {
tb.push({
attributes: { class: 'fa fa-arrows', draggable: true },
attributes: {
class: `fa fa-arrows ${ppfx}no-touch-actions`,
draggable: true
},
//events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
command: 'tlb-move'
});

5
src/style_manager/view/LayerView.js

@ -8,11 +8,11 @@ module.exports = Backbone.View.extend({
},
template(model) {
const pfx = this.pfx;
const { pfx, ppfx } = this;
const label = `Layer ${model.get('index')}`;
return `
<div id="${pfx}move" data-move-layer>
<div id="${pfx}move" class="${ppfx}no-touch-actions" data-move-layer>
<i class="fa fa-arrows"></i>
</div>
<div id="${pfx}label">${label}</div>
@ -32,6 +32,7 @@ module.exports = Backbone.View.extend({
this.stackModel = o.stackModel || {};
this.config = o.config || {};
this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || '';
this.sorter = o.sorter || null;
this.propsConfig = o.propsConfig || {};
this.customPreview = o.onPreview;

18
src/styles/scss/main.scss

@ -213,12 +213,18 @@ $prefix: $app-prefix;
@include user-select(none);
}
.#{$app-prefix}editor {
font-family: $mainFont;
font-size: $fontSizeS;
position: relative;
box-sizing: border-box;
height: 100%;
.#{$app-prefix} {
&no-touch-actions {
touch-action: none;
}
&editor {
font-family: $mainFont;
font-size: $fontSizeS;
position: relative;
box-sizing: border-box;
height: 100%;
}
}
.#{$app-prefix}freezed,

Loading…
Cancel
Save