WIP MNT design/UX cleanup
This commit is contained in:
mntmn
parent
d19d02220e
commit
58250a72ad
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,6 +1,8 @@
|
||||
node_modules
|
||||
javascripts/maps
|
||||
javascripts/spacedeck.js
|
||||
public/stylesheets/*.css
|
||||
database.sqlite
|
||||
*.swp
|
||||
*~
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
"moment": "^2.19.3",
|
||||
"morgan": "^1.9.1",
|
||||
"node-phantom-simple": "2.2.4",
|
||||
"node-server-screenshot": "^0.2.1",
|
||||
"nodemailer": "^4.6.7",
|
||||
"phantomjs-prebuilt": "^2.1.16",
|
||||
"read-chunk": "^2.1.0",
|
||||
|
||||
@ -63,8 +63,8 @@ var SpacedeckSections = {
|
||||
active_style: {
|
||||
border_radius: 0,
|
||||
stroke: 0,
|
||||
font_family: "Avenir W01",
|
||||
font_size: 18,
|
||||
font_family: "Inter",
|
||||
font_size: 36,
|
||||
line_height: 1.5,
|
||||
letter_spacing: 0,
|
||||
|
||||
@ -136,18 +136,8 @@ var SpacedeckSections = {
|
||||
],
|
||||
|
||||
fonts: [
|
||||
"Arial",
|
||||
"Courier",
|
||||
"Georgia",
|
||||
"Verdana",
|
||||
"Comic Sans MS",
|
||||
"Montserrat",
|
||||
"Lato",
|
||||
"Roboto",
|
||||
"Crimson Text",
|
||||
"EB Garamond",
|
||||
"Vollkorn",
|
||||
"Avenir W01"
|
||||
"Inter",
|
||||
"Courier"
|
||||
],
|
||||
|
||||
detected_text_formats: {},
|
||||
@ -180,7 +170,7 @@ var SpacedeckSections = {
|
||||
toolbar_props_in: false,
|
||||
toolbar_artifacts_x: "-1000px",
|
||||
toolbar_artifacts_y: "-1000px",
|
||||
toolbar_artifacts_in: false
|
||||
toolbar_artifacts_in: true
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -1057,7 +1047,7 @@ var SpacedeckSections = {
|
||||
this.toolbar_props_x = pp.x+"px";
|
||||
this.toolbar_props_y = pp.y+"px";
|
||||
|
||||
this.hide_toolbar_artifacts();
|
||||
//this.hide_toolbar_artifacts();
|
||||
}
|
||||
|
||||
this.selection_metrics.x1 = sr.x1;
|
||||
@ -1125,8 +1115,11 @@ var SpacedeckSections = {
|
||||
var er = this.enclosing_rect(this.active_space_artifacts);
|
||||
if (!er) return;
|
||||
|
||||
this.active_space.width =Math.max(er.x2+100, window.innerWidth);
|
||||
this.active_space.height=Math.max(er.y2+100, window.innerHeight);
|
||||
// resize space
|
||||
this.active_space.width =Math.max((parseInt(er.x2/window.innerWidth)+2)*window.innerWidth, window.innerWidth);
|
||||
this.active_space.height=Math.max((parseInt(er.y2/window.innerHeight)+2)*window.innerHeight, window.innerHeight);
|
||||
|
||||
console.log("bounds: ",this.active_space.width,this.active_space.height);
|
||||
|
||||
if (this._last_bounds_width != this.active_space.width ||
|
||||
this._last_bounds_height != this.active_space.height) {
|
||||
@ -1544,7 +1537,7 @@ var SpacedeckSections = {
|
||||
add_artifact: function (space, item_type, url, evt) {
|
||||
this.active_tool = "pointer";
|
||||
this.mouse_state = "idle";
|
||||
this.hide_toolbar_artifacts();
|
||||
//this.hide_toolbar_artifacts();
|
||||
|
||||
if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) {
|
||||
url = prompt("URL?");
|
||||
@ -1789,8 +1782,6 @@ var SpacedeckSections = {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.hide_toolbar_artifacts();
|
||||
|
||||
// 1. create placeholder artifact
|
||||
var w=300,h=150;
|
||||
var fill="transparent";
|
||||
@ -2578,12 +2569,11 @@ var SpacedeckSections = {
|
||||
},
|
||||
|
||||
hide_toolbar_props: function() {
|
||||
this.toolbar_props_in = false;
|
||||
// FIXME test
|
||||
//this.toolbar_props_in = false;
|
||||
},
|
||||
|
||||
show_toolbar_artifacts: function(x,y) {
|
||||
this.toolbar_artifacts_x = (x-175)+"px";
|
||||
this.toolbar_artifacts_y = y+"px";
|
||||
this.toolbar_artifacts_in = true;
|
||||
},
|
||||
|
||||
@ -2593,29 +2583,19 @@ var SpacedeckSections = {
|
||||
|
||||
start_adding_artifact: function(evt) {
|
||||
evt = fixup_touches(evt);
|
||||
|
||||
// toggle
|
||||
if (this.toolbar_artifacts_in) {
|
||||
this.hide_toolbar_artifacts();
|
||||
return;
|
||||
}
|
||||
this.show_toolbar_artifacts(evt.pageX,evt.pageY);
|
||||
},
|
||||
|
||||
start_drawing_scribble: function(evt) {
|
||||
this.hide_toolbar_artifacts();
|
||||
this.active_tool = "scribble";
|
||||
this.opened_dialog = "none";
|
||||
},
|
||||
|
||||
start_drawing_arrow: function(evt) {
|
||||
this.hide_toolbar_artifacts();
|
||||
this.active_tool = "arrow";
|
||||
this.opened_dialog = "none";
|
||||
},
|
||||
|
||||
start_drawing_line: function(evt) {
|
||||
this.hide_toolbar_artifacts();
|
||||
this.active_tool = "line";
|
||||
this.opened_dialog = "none";
|
||||
},
|
||||
|
||||
@ -273,9 +273,9 @@ var SpacedeckSpaces = {
|
||||
|
||||
this.discover_zones();
|
||||
|
||||
//window.setTimeout(function() {
|
||||
// this.zoom_to_fit();
|
||||
//}.bind(this),10);
|
||||
window.setTimeout(function() {
|
||||
this.zoom_to_fit();
|
||||
}.bind(this),10);
|
||||
|
||||
if (on_success) {
|
||||
on_success();
|
||||
@ -876,10 +876,6 @@ var SpacedeckSpaces = {
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
emojified_comment: function(comment) {
|
||||
return twemoji.parse(comment);
|
||||
},
|
||||
|
||||
set_folder_sorting: function(key,reverse) {
|
||||
this.folder_sorting = key;
|
||||
this.folder_reverse = reverse?-1:1;
|
||||
|
||||
@ -80,10 +80,16 @@ function setup_whiteboard_directives() {
|
||||
evt.stopPropagation();
|
||||
}
|
||||
|
||||
var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
|
||||
|
||||
if ($scope.active_tool == "zoom") return;
|
||||
|
||||
if (evt.which == 2) {
|
||||
// middle mouse button
|
||||
this.handle_mouse_down_space(evt);
|
||||
return;
|
||||
}
|
||||
|
||||
var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
|
||||
|
||||
if ($scope.active_tool == "eyedrop") {
|
||||
var arts = $scope.selected_artifacts();
|
||||
if (!$scope.is_selected(a) && arts.length > 0) {
|
||||
@ -196,7 +202,9 @@ function setup_whiteboard_directives() {
|
||||
},
|
||||
|
||||
handle_mouse_down_space: function(evt) {
|
||||
if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
|
||||
if (evt.which != 2) {
|
||||
if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
|
||||
}
|
||||
|
||||
var $scope = this.vm.$root;
|
||||
|
||||
@ -214,7 +222,7 @@ function setup_whiteboard_directives() {
|
||||
this.deselect();
|
||||
this.mouse_state = "transform";
|
||||
$scope.mouse_state = this.mouse_state;
|
||||
this.start_adding_note(evt);
|
||||
this.start_drawing_note(evt);
|
||||
return;
|
||||
|
||||
} else if ($scope.active_tool=="arrow") {
|
||||
@ -492,6 +500,7 @@ function setup_whiteboard_directives() {
|
||||
if (!xdists[0] || xdists[0][0]>TOL) {
|
||||
results.snapx = [0,x]; // distance, coordinate
|
||||
} else {
|
||||
// FIXME snap rulers are broken
|
||||
//$scope.snap_ruler_x = xdists[0][1];
|
||||
}
|
||||
if (!ydists[0] || ydists[0][0]>TOL) {
|
||||
@ -516,6 +525,41 @@ function setup_whiteboard_directives() {
|
||||
return point;
|
||||
},
|
||||
|
||||
start_drawing_note: function(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
var $scope = this.vm.$root;
|
||||
var point = this.cursor_point_to_space(evt);
|
||||
this.offset_point_in_wrapper(point);
|
||||
var z = $scope.highest_z()+1;
|
||||
|
||||
var a = {
|
||||
space_id: $scope.active_space._id,
|
||||
mime: "text/html",
|
||||
description: "<p>Text</p>",
|
||||
x: point.x,
|
||||
y: point.y,
|
||||
z: z,
|
||||
w: 64,
|
||||
h: 64,
|
||||
align: "center",
|
||||
valign: "middle",
|
||||
stroke_color: "#000000",
|
||||
fill_color: "rgb(241, 196, 15)",
|
||||
stroke: 0
|
||||
};
|
||||
|
||||
$scope.save_artifact(a, function(saved_a) {
|
||||
$scope.update_board_artifact_viewmodel(saved_a);
|
||||
$scope.active_space_artifacts.push(saved_a);
|
||||
$scope.select(evt,a);
|
||||
$scope.transform_ox = 0;
|
||||
$scope.transform_oy = 0;
|
||||
$scope.begin_transaction();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
start_drawing_scribble: function(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
@ -851,7 +895,7 @@ function setup_whiteboard_directives() {
|
||||
|
||||
var scale_x = lead_x ? (moved_x)/lead_x : 1;
|
||||
var scale_y = lead_y ? (moved_y)/lead_y : 1;
|
||||
if (!$scope.transform_lock) scale_y = scale_x;
|
||||
if ($scope.transform_lock) scale_y = scale_x;
|
||||
|
||||
$scope.update_selected_artifacts(function(a) {
|
||||
var old_a = $scope.find_artifact_before_transaction(a);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) {
|
||||
var oldPath = url.parse(oldUrl).pathname;
|
||||
uploader.removeFile(oldPath, function(err, res) {});
|
||||
}
|
||||
fs.unlink(local_path);
|
||||
fs.unlinkSync(local_path);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
fs.unlink(localResizedFilePath);
|
||||
fs.unlinkSync(localResizedFilePath);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ router.post('/', function(req, res, next) {
|
||||
|
||||
} else {
|
||||
res.status(400).json({
|
||||
"error": "user already in space"
|
||||
"error": "This email is already included in the Space memberships."
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -26,12 +26,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
|
||||
&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
|
||||
content: "Double click to edit";
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
|
||||
/*&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
|
||||
content: "Type here";
|
||||
opacity: 0.25;
|
||||
}*/
|
||||
@ -469,7 +469,7 @@
|
||||
color: black;
|
||||
//@include user-select(none);
|
||||
white-space: normal;
|
||||
font-size: 18px;
|
||||
font-size: 36px;
|
||||
|
||||
&.artifact-zone {
|
||||
border: 1px solid rgba(46,204,113,1);
|
||||
@ -553,6 +553,10 @@ body:not(.present-mode) {
|
||||
cursor: grab !important;
|
||||
}
|
||||
|
||||
.tool-note {
|
||||
cursor: crosshair !important;
|
||||
}
|
||||
|
||||
.artifact.state-idle {
|
||||
.progress, .progress-text {
|
||||
display: none;
|
||||
|
||||
@ -7,12 +7,6 @@
|
||||
|
||||
.btn-group.colors {
|
||||
.btn {
|
||||
// padding: 4px;
|
||||
// background-clip: content-box;
|
||||
// padding-right: 2px;
|
||||
// &:last-child {
|
||||
// padding-right: 4px;
|
||||
// }
|
||||
box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1);
|
||||
}
|
||||
}
|
||||
@ -64,7 +58,7 @@
|
||||
backface-visibility: hidden;
|
||||
cursor: pointer;
|
||||
background-color: $light;
|
||||
color: $medium;;
|
||||
color: $black;
|
||||
|
||||
@include user-select(none);
|
||||
&:last-child {border: none;}
|
||||
@ -82,12 +76,9 @@
|
||||
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
color: $medium;;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
&.facebook {background-color: $facebook !important; color: white !important;}
|
||||
&.twitter {background-color: $twitter !important; color: white !important; }
|
||||
|
||||
&.btn-round {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
@ -96,21 +87,10 @@
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
// &.close {
|
||||
// position: absolute;
|
||||
// top: 15px;
|
||||
// right: 15px;
|
||||
// z-index: 4000;
|
||||
// font-size: 40px;
|
||||
// }
|
||||
|
||||
&.btn-nude {
|
||||
min-width: 0 !important;
|
||||
// font-size: inherit !important;
|
||||
padding: 0 !important;
|
||||
// height: auto !important;
|
||||
background-color: transparent;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
&.btn-nude + .btn-nude {
|
||||
@ -123,7 +103,7 @@
|
||||
|
||||
&.btn-stroke {
|
||||
box-shadow: inset 0 0 0 1px $dark;
|
||||
color: $dark !important;
|
||||
color: $black;
|
||||
background-color: transparent;
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 1px white;
|
||||
@ -132,9 +112,8 @@
|
||||
}
|
||||
|
||||
&.btn-stroke-darken {
|
||||
//box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
color: $medium;
|
||||
border: 1px solid $black;
|
||||
color: $black;
|
||||
background-color: transparent;
|
||||
&:active {
|
||||
//box-shadow: inset 0 0 0 1px $dark;
|
||||
@ -263,9 +242,18 @@
|
||||
|
||||
&.btn-transparent {
|
||||
background-color: transparent;
|
||||
color: $medium;
|
||||
&.active {color: $darker !important; }
|
||||
&.open {color: white !important; }
|
||||
color: $dark;
|
||||
&.active {
|
||||
//color: $black !important;
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
}
|
||||
&.open {
|
||||
//color: $black !important;
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-transparent-medium {
|
||||
@ -714,7 +702,6 @@
|
||||
}
|
||||
|
||||
> * {
|
||||
border-radius: 0 !important;
|
||||
background-clip: padding-box;
|
||||
width: 100%;
|
||||
float: left;
|
||||
@ -775,7 +762,7 @@
|
||||
}
|
||||
}
|
||||
.btn-group {
|
||||
@include scale(0,0);
|
||||
//@include scale(0,0);
|
||||
//@include transition( all 0.1s 0s ease-in-out);
|
||||
|
||||
position: absolute;
|
||||
@ -787,7 +774,7 @@
|
||||
margin-left: -12px;
|
||||
|
||||
.btn {
|
||||
@include scale(0,0);
|
||||
//@include scale(0,0);
|
||||
//@include transition( all 0.1s 0.05s ease-in-out);
|
||||
|
||||
|
||||
@ -979,31 +966,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.bottom-left > .btn {
|
||||
border-radius: 0px;
|
||||
|
||||
&:first-child{
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
&.last,
|
||||
&:last-child{
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xyz {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@include clearfix;
|
||||
min-height: 44px;
|
||||
}
|
||||
// !btn-group
|
||||
|
||||
.btn-group {
|
||||
position: relative;
|
||||
@ -1014,13 +977,16 @@
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
border: 1px solid $dark;
|
||||
border-radius: 5px;
|
||||
|
||||
&.dark {
|
||||
border-radius: $radius;
|
||||
background-color: $dark;
|
||||
color: $lighter;
|
||||
color: $white;
|
||||
|
||||
.btn {
|
||||
color: $lighter;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -125,8 +125,10 @@
|
||||
@include transition( all 0.125s ease-in-out);
|
||||
pointer-events: none;
|
||||
background-color: $light;
|
||||
color: $medium;
|
||||
&.dark {background-color: $dark; }
|
||||
color: $dark;
|
||||
&.dark {
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
border-radius: $radius*3;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -43,9 +43,6 @@ $predelay: 0;
|
||||
|
||||
&.hover:hover,
|
||||
&.open {
|
||||
// &:before {opacity: 0.125; }
|
||||
// pointer-events: auto;
|
||||
background-color: $dark;
|
||||
background-color: $light;
|
||||
|
||||
> * {
|
||||
@ -111,8 +108,8 @@ $predelay: 0;
|
||||
}
|
||||
|
||||
&:last-child > .btn{
|
||||
border-top-right-radius: $radius ;
|
||||
border-bottom-right-radius: $radius ;
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -143,8 +140,7 @@ $predelay: 0;
|
||||
|
||||
&.light > .dropdown-menu,
|
||||
&.light > .dialog {
|
||||
background: $light;
|
||||
color: $medium;
|
||||
background: white;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
@ -189,8 +185,6 @@ $predelay: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.hover:hover > .dialog,
|
||||
&.hover:hover > .dropdown-menu,
|
||||
|
||||
@ -206,9 +200,7 @@ $predelay: 0;
|
||||
&.open {
|
||||
> .dialog,
|
||||
> .dropdown-menu {
|
||||
-webkit-transform: translate3d(-50%, -50%, 100px) scale(1);
|
||||
-ms-transform: translate3d(-50%, -50%, 100px) scale(1);
|
||||
transform: translate3d(-50%, -50%, 100px) scale(1);
|
||||
//transform: translate3d(-50%, -50%, 100px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -217,10 +209,8 @@ $predelay: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: 0px;
|
||||
@include transform-origin(center center);
|
||||
-webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
|
||||
-ms-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
|
||||
transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
|
||||
//@include transform-origin(center center);
|
||||
//transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -230,10 +220,8 @@ $predelay: 0;
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 16px;
|
||||
@include transform-origin(bottom left);
|
||||
-webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
|
||||
-ms-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
|
||||
transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
|
||||
//@include transform-origin(bottom left);
|
||||
//transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -243,10 +231,8 @@ $predelay: 0;
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 16px;
|
||||
@include transform-origin(bottom center);
|
||||
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
//@include transform-origin(bottom center);
|
||||
//transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
}
|
||||
|
||||
}
|
||||
@ -257,10 +243,16 @@ $predelay: 0;
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
margin-top: -16px;
|
||||
@include transform-origin(top center);
|
||||
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
//@include transform-origin(top center);
|
||||
//transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&.top.left {
|
||||
> .dialog,
|
||||
> .dropdown-menu {
|
||||
left: 70px;
|
||||
margin-top: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,20 +262,18 @@ $predelay: 0;
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin-top: 16px;
|
||||
@include transform-origin(top right);
|
||||
-webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
|
||||
-ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
|
||||
transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
|
||||
|
||||
right: 70px;
|
||||
margin-top: -60px;
|
||||
|
||||
//@include transform-origin(top right);
|
||||
//transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
|
||||
}
|
||||
&.hover:hover,
|
||||
&.open {
|
||||
> .dialog,
|
||||
> .dropdown-menu {
|
||||
-webkit-transform: translate3d(0%, 0%, 100px) scale(1);
|
||||
-ms-transform: translate3d(0%, 0%, 100px) scale(1);
|
||||
transform: translate3d(0%, 0%, 100px) scale(1);
|
||||
//transform: translate3d(0%, 0%, 100px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -312,9 +302,7 @@ $predelay: 0;
|
||||
|
||||
> .dialog,
|
||||
> .dropdown-menu {
|
||||
-webkit-transform: translate3d(-50%, 0%, 100px) scale(1);
|
||||
-ms-transform: translate3d(-50%, 0%, 100px) scale(1);
|
||||
transform: translate3d(-50%, 0%, 100px) scale(1);
|
||||
//transform: translate3d(-50%, 0%, 100px) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -324,9 +312,7 @@ $predelay: 0;
|
||||
&.open {
|
||||
> .dialog,
|
||||
> .dropdown-menu {
|
||||
-webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
|
||||
-ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
|
||||
transform: translate3d(-33%, 0%, 100px) scale(1) !important;
|
||||
//transform: translate3d(-33%, 0%, 100px) scale(1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -334,7 +320,7 @@ $predelay: 0;
|
||||
|
||||
|
||||
.dropdown {
|
||||
&.options-3 {
|
||||
/*&.options-3 {
|
||||
&.option-1:after { margin-left: -68px;}
|
||||
&.option-2:after { margin-left: -8px;}
|
||||
&.option-3:after { margin-left: 52px;}
|
||||
@ -348,8 +334,9 @@ $predelay: 0;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}*/
|
||||
|
||||
/*
|
||||
&:after {
|
||||
@include transition( all 0.1s ease-in-out 0s);
|
||||
content: "";
|
||||
@ -362,26 +349,24 @@ $predelay: 0;
|
||||
margin-left: -8px;
|
||||
pointer-events: none !important;
|
||||
left: 50%;
|
||||
-webkit-transform: scale(0,0);
|
||||
-ms-transform: scale(0,0);
|
||||
transform: scale(0,0);
|
||||
//transform: scale(0,0);
|
||||
}
|
||||
|
||||
&.bottom:after, &.bottomleft:after {
|
||||
@include transform-origin(bottom center);
|
||||
//@include transform-origin(bottom center);
|
||||
bottom: 100%;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid #303030;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
|
||||
&.top:after {
|
||||
*/
|
||||
/*&.top:after {
|
||||
@include transform-origin(top center);
|
||||
top: 100%;
|
||||
border-bottom: 8px solid #303030;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
@ -28,7 +28,6 @@
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: $medium;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: $radius;
|
||||
|
||||
@ -2,24 +2,14 @@
|
||||
@import "mixins";
|
||||
|
||||
.input-select {
|
||||
// background-color: rgba(255,255,255,0.04);
|
||||
// background-image: url('images/select_arrow.gif');
|
||||
background-color: rgba(255,255,255,0.04);
|
||||
background-image: url('images/select_arrow.gif');
|
||||
border-radius: $radius;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
select.input{
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance:none;
|
||||
// -moz-appearance:window;
|
||||
appearance:none;
|
||||
padding-left: 0px;
|
||||
width: 100%;
|
||||
|
||||
@ -113,43 +113,26 @@ select {
|
||||
|
||||
&.input-white {
|
||||
background-color: white;
|
||||
color: $medium;
|
||||
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&.input-light {
|
||||
background-color: $light;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
&.input-dark {
|
||||
background-color: $darker;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
&.input-lighten {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
color: $medium !important;
|
||||
}
|
||||
|
||||
&.input-darken {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
&.input-transparent {
|
||||
background-color: transparent;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
// &:focus {color: white; }
|
||||
|
||||
&:invalid {
|
||||
// background-color: rgba(198,101,84,0.05);
|
||||
// color: rgba(198,101,84,0.75)
|
||||
|
||||
&:after {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include input-focus();
|
||||
|
||||
@ -69,26 +69,27 @@
|
||||
}
|
||||
|
||||
.handles {
|
||||
// background-color: rgba(40,140,215,0.45);
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
//border: 1px solid rgba(255,255,255,0.5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
bottom: -1;
|
||||
right: 0;
|
||||
z-index: 800;
|
||||
pointer-events: none;
|
||||
|
||||
background: rgba(255,255,255,0.1);
|
||||
|
||||
&:after{
|
||||
border: 1px dotted rgba(40,140,215,1);
|
||||
border: 4px dotted #000000;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
width: auto;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
@ -97,7 +98,7 @@
|
||||
border: 8px solid rgba(255,255,255,0.5);
|
||||
|
||||
&:after{
|
||||
border: 8px dotted rgba(40,140,215,1);
|
||||
border: 8px dotted #000000;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
@ -332,16 +333,15 @@
|
||||
pointer-events:auto;
|
||||
z-index: 2000;
|
||||
position: absolute;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
border-radius: 100%;
|
||||
margin: -15px;
|
||||
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
border: 1px solid black;
|
||||
margin: -5px;
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
cursor: move;
|
||||
background-color: black;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
@ -428,15 +428,8 @@
|
||||
border-style: solid;
|
||||
border-width: 10px;
|
||||
border-color: transparent;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
|
||||
-webkit-transition: all .05s ease-in-out;
|
||||
-moz-transition: all .05s ease-in-out;
|
||||
-ms-transition: all .05s ease-in-out;
|
||||
-o-transition: all .05s ease-in-out;
|
||||
transition: all .05s ease-in-out;
|
||||
background-clip: padding-box;
|
||||
transition: all .05s ease-in-out;
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
@ -31,17 +31,14 @@
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@include transform-origin(center left);
|
||||
left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.header-right {
|
||||
@include transform-origin(center right);
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.header-center {
|
||||
@include transform-origin(center center);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
@import "mixins";
|
||||
|
||||
.wrapper {
|
||||
//@include transition( all 0.25s ease-in-out);
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 1160px;
|
||||
|
||||
@ -59,9 +59,9 @@
|
||||
}
|
||||
|
||||
.close {
|
||||
position: fixed;
|
||||
margin: 44px 44px;
|
||||
.icon {display: block; }
|
||||
margin-left: 44px;
|
||||
margin-bottom: 44px;
|
||||
.icon {display: block; }
|
||||
}
|
||||
|
||||
figure {
|
||||
@ -146,7 +146,6 @@
|
||||
.modal-header {
|
||||
padding: 30px 40px;
|
||||
position: relative;
|
||||
color: $medium;
|
||||
}
|
||||
|
||||
.close-search {
|
||||
|
||||
12
styles/normalize.scss
vendored
12
styles/normalize.scss
vendored
@ -1,17 +1,5 @@
|
||||
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
// user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
//
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
padding: 0 !important;
|
||||
|
||||
.wrapper {
|
||||
border: 1px dotted rgba(128,128,128,0.5);
|
||||
border: 4px solid black;
|
||||
|
||||
transition-duration: 0.25s;
|
||||
transition-property: width, height, background-color;
|
||||
@ -132,32 +132,27 @@
|
||||
max-height: 100%;
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
/** {
|
||||
-moz-user-select: none !important; // firefox has selection problems
|
||||
}*/
|
||||
}
|
||||
|
||||
.snap-ruler-h {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
z-index: 2000;
|
||||
right: 0px;
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
background-color: black;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.snap-ruler-v {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
z-index: 2000;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 1px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
@ -227,30 +222,12 @@
|
||||
}
|
||||
|
||||
#space {
|
||||
/*-webkit-user-select: all;
|
||||
-ms-user-select: all;
|
||||
-moz-user-select: all;
|
||||
user-select: all;*/
|
||||
// user-select: all;
|
||||
position: relative;
|
||||
height: 100% !important;
|
||||
|
||||
//padding-top: 64px !important;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#made-with {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 12px;
|
||||
opacity: 0.25;
|
||||
a {color: $dark; }
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
#baseline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -298,8 +275,8 @@
|
||||
|
||||
.space-bounds {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -65,10 +65,8 @@
|
||||
html,
|
||||
body {
|
||||
height:100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: white;
|
||||
background-color: $light;
|
||||
color: $darker;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
*[contenteditable="true"] {
|
||||
@ -89,60 +87,21 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#home {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.img img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.plan {
|
||||
color: $medium;
|
||||
border-radius: $radius;
|
||||
display: inline-block;
|
||||
padding: 30px;
|
||||
|
||||
background-color: transparent;
|
||||
border: 2px solid rgba(0,0,0,0.05);
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: black;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
font-size: 10px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border-top: 2px solid rgba(0,0,0,0.05);
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
li {padding-top: 2px; }
|
||||
}
|
||||
}
|
||||
|
||||
#startup {
|
||||
background-position: center;
|
||||
background-image:url(/images/diamond.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#home {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layer {
|
||||
@include transition( all 0.2s ease-in-out);
|
||||
|
||||
@ -8,10 +8,9 @@
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
color: $medium;;
|
||||
font-family: $main-font;
|
||||
// border-radius: $radius;
|
||||
// border: 2px solid rgba(0,0,0,0.0125) !important;
|
||||
border-radius: $radius;
|
||||
border: 2px solid rgba(0,0,0,0.0125);
|
||||
}
|
||||
|
||||
.table thead > tr > th:first-child,
|
||||
|
||||
@ -19,50 +19,19 @@
|
||||
}
|
||||
|
||||
margin: auto;
|
||||
//text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
//width: 100%;
|
||||
top: 10px;
|
||||
z-index: 3000;
|
||||
padding: $gutter-b;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-delay: initial;
|
||||
transition-property: opacity, transform;
|
||||
@include backface-visibility(hidden);
|
||||
// FIXME questionable?
|
||||
|
||||
@include translate3d(0, 10px, 0);
|
||||
pointer-events: none !important;
|
||||
opacity: 0;
|
||||
|
||||
&.out {
|
||||
@include translate3d(0, 10px, 0);
|
||||
* {pointer-events: none !important; }
|
||||
button, input, .dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.in {
|
||||
@include translate3d(0, 0, 0);
|
||||
|
||||
&.out {
|
||||
@include translate3d(0, 10px, 0);
|
||||
* {pointer-events: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 0 2px;
|
||||
margin-top: 4px;
|
||||
pointer-events: auto !important;
|
||||
&.out {
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar-vertical {
|
||||
@ -187,7 +156,6 @@
|
||||
}
|
||||
|
||||
.toolbar-properties {
|
||||
bottom: 64px;
|
||||
z-index: 0;
|
||||
|
||||
&.in {
|
||||
@ -196,12 +164,12 @@
|
||||
|
||||
.icon-sm {
|
||||
z-index: 110;
|
||||
background-color: #222;
|
||||
//background-color: #222;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.jewel {
|
||||
border: 2px solid rgba(255,255,255,0.5);
|
||||
border: 2px solid #888;
|
||||
background-color: transparent;
|
||||
color: #989898;
|
||||
width: 36px;
|
||||
@ -228,5 +196,15 @@
|
||||
|
||||
.toolbar-elements > .btn-group,
|
||||
.toolbar-properties > .btn-group {
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
//box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.toolbar-elements {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.toolbar-properties {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -33,10 +33,7 @@
|
||||
@include translate3d(0, 0, 0);
|
||||
|
||||
// @include backface-visibility(hidden);
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
-ms-perspective: 1000;
|
||||
perspective: 1000;
|
||||
perspective: 1000;
|
||||
|
||||
.panel-toggles {
|
||||
@include transition( all 0.15s ease-in-out);
|
||||
@ -99,10 +96,7 @@
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
// @include backface-visibility(hidden);
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
-ms-perspective: 1000;
|
||||
perspective: 1000;
|
||||
perspective: 1000;
|
||||
|
||||
z-index: 1000;
|
||||
|
||||
|
||||
@ -9,13 +9,6 @@ $green: #2ecc71;
|
||||
$red: #ff5955;
|
||||
$yellow: #f1c40f;
|
||||
|
||||
$light: #f5f5f5;
|
||||
$lightish: #eee;
|
||||
|
||||
|
||||
$facebook: #3e5b97;
|
||||
$twitter: #2aa7de;
|
||||
|
||||
$color-1 : #4a2f7e; // purple
|
||||
$color-2 : #9b59b6; // lilac
|
||||
$color-3 : #3498db; // blue
|
||||
@ -32,15 +25,18 @@ $black: #111; // black
|
||||
$darker: #292929;
|
||||
$dark: #222; // dark
|
||||
$medium: #888; // medium
|
||||
$light: #f5f5f5;
|
||||
$lightish: #eee; // fixme
|
||||
$lighter: #989898;
|
||||
$white: #ffffff;
|
||||
|
||||
$sidebar-width: 280px;
|
||||
|
||||
$main-font: Avenir W01;
|
||||
$sec-font: Avenir W01;
|
||||
$main-font: Inter;
|
||||
$sec-font: Inter;
|
||||
|
||||
$font-size: 18px;
|
||||
$line-height: 24px;
|
||||
$font-size: 12pt;
|
||||
$line-height: 1.5em;
|
||||
|
||||
$gutter-a: 10px;
|
||||
$gutter-b: 20px;
|
||||
|
||||
@ -9,10 +9,7 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link href="[[ '/images/favicon.png' | cdn ]]" rel="icon" type="image/x-icon" />
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,700,600,800,300|Montserrat:400,700|EB+Garamond|Vollkorn|Lato|Roboto|Source+Code+Pro|Ubuntu|Raleway|Playfair+Display|Crimson+Text' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/ee1a3484-4d98-4f9f-9f55-020a7b37f3c5.css"/>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="[[ '/stylesheets/style.css' | cdn ]]">
|
||||
<script> var csrf_token = '[[ csrf_token ]]'; </script>
|
||||
|
||||
@ -53,7 +50,7 @@
|
||||
<p>
|
||||
<div class="col-xs-6">
|
||||
<a href="/contact">[[ __("contact") ]]</a>
|
||||
<span style="color:#888">© 2011–2018 The Spacedeck Open Developers <a href="https://github.com/spacedeck/spacedeck-open">https://github.com/spacedeck/spacedeck-open</a></span>
|
||||
<span style="color:#888">© 2011–2020 The Spacedeck Open Developers <a href="https://github.com/spacedeck/spacedeck-open">https://github.com/spacedeck/spacedeck-open</a></span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -5,11 +5,19 @@
|
||||
</a>
|
||||
<button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-primary btn-md btn-round" v-on:click="create_space('space')">[[ __('create_space') ]]</button>
|
||||
<button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-stroke-darken btn-md btn-round" v-on:click="create_space('folder')">
|
||||
<span v-bind:class="{'disabled-pro':!is_pro(user)}">[[ __('create_folder') ]]</span>
|
||||
<span>[[ __('create_folder') ]]</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="header-right pull-right">
|
||||
<label class="relative compact-hidden">
|
||||
<span class="icon icon-sm icon-zoom no-events absolute-top-left" style="margin: 5px;"></span>
|
||||
<input id="folder-search"
|
||||
type="search" name="search"
|
||||
style="padding-left: 40px !important; margin-right: 10px;"
|
||||
placeholder="[[ __('search') ]]"
|
||||
class="input input-md input-white input-round no-b w-2"
|
||||
v-model="folder_spaces_search" v-on:change="search_spaces">
|
||||
</label>
|
||||
|
||||
<div class="dropdown top light m-r-20 compact-hidden" v-bind:class="{open : active_dropdown=='folder_sorting'}">
|
||||
<button class="btn btn-sm btn-nude" v-on:click="activate_dropdown('folder_sorting')">
|
||||
<span>[[ __('sort_by') ]]</span>:
|
||||
@ -33,26 +41,12 @@
|
||||
v-on:click="set_folder_sorting('space_type',false)">
|
||||
<span>[[ __('type') ]]</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="relative compact-hidden">
|
||||
<span class="icon icon-sm icon-zoom no-events absolute-top-left" style="margin: 5px;"></span>
|
||||
<input id="folder-search"
|
||||
type="search" name="search"
|
||||
style="padding-left: 40px !important; margin-right: 10px;"
|
||||
placeholder="[[ __('search') ]]"
|
||||
class="input input-md input-white input-round no-b w-2"
|
||||
v-model="folder_spaces_search" v-on:change="search_spaces">
|
||||
</label>
|
||||
|
||||
<button class="btn btn-stroke-darken btn-md btn-round" v-if="!user.confirmed_at" v-on:click="confirm_again()">
|
||||
<span v-if="!account_confirmed_sent">[[ __('email_unconfirmed') ]]</span>
|
||||
<span v-if="account_confirmed_sent">[[ __('confirmation_sent') ]]</span>
|
||||
</button>
|
||||
|
||||
<div class="header-right pull-right">
|
||||
<div class="dropdown top right light" v-bind:class="{open: active_dropdown=='account'}">
|
||||
<button
|
||||
class="profile-avatar btn btn-md btn-icon btn-darken btn-round"
|
||||
@ -76,13 +70,6 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li v-on:click="activate_modal('support')">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-info"></span>
|
||||
<span>[[ __('support') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-on:click="logout()">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-logout"></span>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content" style="width:760px">
|
||||
<div class="modal-header" style="padding-bottom:0">
|
||||
<h3 class="text-left"><span class="icon icon-share icon-sm"></span> [[__("share")]]: {{access_settings_space.name}}</h3>
|
||||
<h3 class="text-left">[[__("share")]]: {{access_settings_space.name}}</h3>
|
||||
<button type="button" class="btn btn-icon btn-light btn-round close" v-on:click=" close_modal()">
|
||||
<span class="icon icon-cross-1"></span>
|
||||
</button>
|
||||
@ -68,7 +68,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary btn-md btn-round" v-on:click="invite_member(access_settings_space, invite_email, invite_message, invite_member_role)"> [[__("invite")]] </button>
|
||||
<button class="btn btn-primary btn-md" v-on:click="invite_member(access_settings_space, invite_email, invite_message, invite_member_role)"> [[__("invite")]] </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
<h4 class="text-left"><span class="icon icon-user-group icon-sm"></span> [[__("access_current_members")]]</h4>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Icon</th>
|
||||
<th>Email / Name</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
@ -91,7 +91,7 @@
|
||||
<td>
|
||||
<span class="editor-email" v-if="member.state == 'active'">{{member.user.email}}</span>
|
||||
<span class="editor-email" v-if="member.state == 'pending'">{{member.email_invited}}</span>
|
||||
<span class="editor-name" v-if="member.state == 'active'">{{member.user.nickname}}</span>
|
||||
<span class="editor-name" v-if="member.state == 'active'">{{member.user.nickname}}</span>
|
||||
<span class="editor-email" v-if="member.state == 'pending'">(pending)</span>
|
||||
</td>
|
||||
<td>
|
||||
@ -113,7 +113,7 @@
|
||||
</p>
|
||||
|
||||
<div class="form-group" style="padding-top: 40px">
|
||||
<button class="btn btn-primary btn-md btn-round" v-on:click="close_modal();"> [[__("ok")]] </button>
|
||||
<button class="btn btn-primary btn-md" v-on:click="close_modal();"> [[__("ok")]] </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,131 +1,3 @@
|
||||
<!-- FIXME modal -->
|
||||
<div class="modal" v-if="(duplicate_folders.length > 0)" v-cloak>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-dialog">
|
||||
|
||||
<button type="button" class="btn btn-icon btn-light btn-round close" v-on:click="duplicate_folders = []">
|
||||
<span class="icon icon-cross-1"></span>
|
||||
</button>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="modal-body labels-inline">
|
||||
<div class="modal-section">
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
[[__("duplicate_destination")]]
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<select v-on:change="duplicate_folder_id=$event.target.value">
|
||||
<option v-for="f in duplicate_folders" value="{{f._id}}">{{f.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-md btn-round btn-primary" v-on:click="duplicate_folder_confirm(); ">
|
||||
<span class="icon-label">[[__("ok")]]</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-md btn-round btn-darken pull-right" v-on:click="duplicate_folders = [];">
|
||||
<span class="icon-label">[[__("cancel")]]</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-cloak class="header-left" v-show="active_space_loaded">
|
||||
<div class="btn-group dark">
|
||||
|
||||
<div class="pull-left">
|
||||
<a
|
||||
class="btn btn-stroke-darken btn-md btn-round btn-icon"
|
||||
title="[[__("home")]]" href="/spaces"
|
||||
v-if="(logged_in && !embedded && !active_space.parent_space_id && !guest_nickname)">
|
||||
<span class="icon icon-home"></span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="btn btn-stroke-darken btn-md btn-round btn-icon"
|
||||
title="[[__("parent_folder")]]"
|
||||
href="/folders/{{active_space.parent_space_id}}"
|
||||
v-if="(active_space.parent_space_id && !guest_nickname)">
|
||||
|
||||
<span class="icon icon-arrow-left-light"></span>
|
||||
</a>
|
||||
|
||||
<input class="input input-md input-transparent w-auto"
|
||||
id="space-title"
|
||||
v-model="active_space.name" name="title" v-on:keydown="save_space_keydown($event)"
|
||||
v-if="space_editing_title && logged_in" style="padding-right:0" v-focus>
|
||||
|
||||
<span class="input input-md input-transparent w-auto"
|
||||
v-if="!space_editing_title && logged_in"
|
||||
v-on:click="edit_space_title()">{{active_space.name}}</span>
|
||||
|
||||
<span v-if="!logged_in" class="btn btn-dark btn-round btn-md">{{active_space.name}}</span>
|
||||
|
||||
<button class="btn btn-md btn-transparent btn-icon" v-if="space_editing_title" v-on:click="save_space_keydown()">
|
||||
<span class="icon icon-check"></span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown top left light" v-bind:class="{open: active_dropdown=='space'}">
|
||||
<button class="btn btn-md btn-icon btn-dark" v-on:click="activate_dropdown('space')">
|
||||
<span class="icon icon-triangle-down"></span></button>
|
||||
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<ul class="select-list">
|
||||
|
||||
<li v-on:click="activate_access()" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-share"></span>
|
||||
<span>[[ __('share') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-on:click="edit_space_title()" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-tag"></span>
|
||||
<span>[[ __('rename') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-on:click="duplicate_space_into_folder()" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-duplicate"></span>
|
||||
<span>[[ __('duplicate') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-on:click="download_space()">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-download"></span>
|
||||
<span>[[ __('download_space') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-on:click="activate_modal('support')" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-info"></span>
|
||||
<span>[[ __('support') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="btn btn-red btn-md" id="offline-indicator" v-bind:class="{offline: was_offline}" v-on:click="show_offline_help()">[[__("offline")]]</span>
|
||||
</div>
|
||||
|
||||
<div v-cloak class="header-right" v-if="active_space_loaded">
|
||||
|
||||
<span v-for="active_user in active_space_users" >
|
||||
@ -141,13 +13,7 @@
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="btn-group dark" v-if="active_space_role!='viewer'">
|
||||
<button class="btn btn-md btn-transparent btn-icon" title="Start Presentation (others follow what you see)" v-on:click="toggle_present_mode()" v-bind:class="{open:present_mode}">
|
||||
<span class="icon icon-presentation"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dark round" v-if="zones.length">
|
||||
<div class="btn-group light round" v-if="zones.length">
|
||||
<button class="btn btn-md btn-transparent btn-icon" v-on:click="go_to_previous_zone()" title="[[__("Previous Zone")]]">
|
||||
<span class="icon icon-triangle-4-left"></span>
|
||||
</button>
|
||||
@ -159,16 +25,12 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--button class="btn btn-md btn-dark btn-round btn-icon" v-on:click="download_space()" title="[[__("download_space")]]">
|
||||
<span class="icon icon-download"></span>
|
||||
</button-->
|
||||
|
||||
<div class="btn-group dark" id="meta-toggle" style="margin-right:10px">
|
||||
<!--div class="btn-group light" id="meta-toggle" style="margin-right:10px">
|
||||
<button class="btn btn-md btn-transparent btn-icon" v-on:click="toggle_meta()" title="[[__("chat")]]">
|
||||
<span class="jewel" style="color: white; background-color: red" v-if="meta_unseen>0">{{meta_unseen}}</span>
|
||||
<span class="icon icon-messages"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
|
||||
{% include "./tool/toolbar-elements.html" %}
|
||||
@ -206,7 +68,7 @@
|
||||
|
||||
<div id="space-clipboard" style="position:fixed;top:0;left:0;z-index:0;opacity:0;background-color:white"><textarea v-model="selected_artifacts_json" cols="2" rows="2" id="clipboard-ta" class="mousetrap"></textarea></div>
|
||||
|
||||
<div class="space-bounds" v-bind:style="{width: active_space.width*bounds_zoom + 'px', height: active_space.height*bounds_zoom + 'px', 'background-color': active_space.background_color}"></div>
|
||||
<div class="space-bounds" v-bind:style="{width: (active_space.width*bounds_zoom+1000) + 'px', height: (active_space.height*bounds_zoom+1000) + 'px', 'background-color': active_space.background_color}"></div>
|
||||
|
||||
<div class="wrapper"
|
||||
v-bind:style="{
|
||||
@ -244,7 +106,6 @@
|
||||
<a class="link btn btn-round btn-primary btn-sm" v-if="a.view.link" v-bind:href="a.view.link" target="_blank">{{a.view.link_caption}}</a>
|
||||
</span>
|
||||
|
||||
<div class="btn btn-xs btn-icon btn-round btn-primary edit" v-show="editing_artifact_id!=a._id && is_selected(a)" v-on:touchstart="delayed_edit_artifact($event)"><span class="icon icon-pencil" v-on:click="toggle_selected_artifact_editing(true)" v-on:"touchstart:delayed_edit_artifact($event)"></span></div>
|
||||
<input v-show="is_selected(a)" type="text" id="ios-focuser-{{a._id}}" class="ios-focuser">
|
||||
</div>
|
||||
|
||||
@ -463,7 +324,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="active_space_loaded" v-cloak>
|
||||
<div id="minimap"
|
||||
<!--div id="minimap"
|
||||
v-bind:style="{width: ''+(active_space.width/minimap_scale)+'px', height: ''+(active_space.height/minimap_scale)+'px', bottom: '66px', right: '20px'}"
|
||||
v-if="active_space"
|
||||
v-on:mousedown="handle_minimap_mousedown($event)"
|
||||
@ -475,17 +336,16 @@
|
||||
v-on:mouseup="handle_minimap_mouseup($event)">
|
||||
<div v-for="a in active_space_artifacts" v-bind:style="{left: ''+(a.x/minimap_scale)+ 'px', top: ''+(a.y/minimap_scale) + 'px', width: ''+(a.w/minimap_scale)+ 'px', height: ''+(a.h/minimap_scale) + 'px'}"></div>
|
||||
<div class="window" v-bind:style="{left: ''+(scroll_left/minimap_scale) + 'px', top: ''+(scroll_top/minimap_scale)+ 'px', width: ''+(window_width/minimap_scale)+ 'px', height: ''+(window_height/minimap_scale) + 'px'}"></div>
|
||||
</div-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="btn-group dark" style="position:absolute;bottom:20px;right:20px;">
|
||||
<button class="btn btn-icon btn-md btn-transparent" v-on:click="zoom_in()">
|
||||
<div class="btn-group light zoom-bar" style="position:absolute;bottom:20px;right:20px;">
|
||||
<button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()">
|
||||
<span class="icon icon-plus"></span>
|
||||
</button>
|
||||
<button class="btn btn-md btn-transparent no-p" v-on:click="zoom_to_original()">
|
||||
<button class="btn btn-md btn-white no-p" v-on:click="zoom_to_original()">
|
||||
{{viewport_zoom_percent}}%
|
||||
</button>
|
||||
<button class="btn btn-icon btn-md btn-transparent" v-on:click="zoom_out()">
|
||||
<button class="btn btn-icon btn-md btn-white" v-on:click="zoom_out()">
|
||||
<span class="icon icon-minus"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -126,20 +126,12 @@
|
||||
<label class="label label-sm text-center">[[__("font_size")]]</label>
|
||||
<input class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" v-model="active_style.font_size">
|
||||
|
||||
<!--button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.font_size" sd-fader-min-y="8" sd-fader-max-y="400" sd-fader-sens="0.2">
|
||||
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.font_size" sd-fader-min-y="30" sd-fader-max-y="200" sd-fader-sens="5">
|
||||
<span class="icon icon-triangles-vertical"></span>
|
||||
</button-->
|
||||
</button>
|
||||
<span class="input-unit">px</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group no-m">
|
||||
<span class="font-size-swatches" v-show="opened_dialog=='color-text'">
|
||||
<button class="btn btn-sm" v-on:click="apply_font_size(64)" style="font-size:32px">Big</button>
|
||||
<button class="btn btn-sm" v-on:click="apply_font_size(32)" style="font-size:24px">Medium</button>
|
||||
<button class="btn btn-sm" v-on:click="apply_font_size(18)" style="font-size:14px">Small</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--div class="form-group no-m">
|
||||
<label class="label label-sm text-center">[[__("line_height")]]</label>
|
||||
<input disabled class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9\.]" maxlength="64" v-model="active_style.line_height">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div id="layout" class="relative">
|
||||
<div class="dialog-section no-p-b">
|
||||
<div class="btn-group">
|
||||
<div class="">
|
||||
<button class="btn btn-transparent btn-icon" v-on:click="layout_stack_top()">
|
||||
<span class="icon icon-stack-3d-top"></span>
|
||||
</button>
|
||||
@ -20,7 +20,7 @@
|
||||
<span class="icon icon-align-bottom"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="">
|
||||
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()">
|
||||
<span class="icon icon-align-center-horizontal"></span>
|
||||
</button>
|
||||
|
||||
@ -24,6 +24,6 @@
|
||||
<!--button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'insertUnorderedList')">
|
||||
<span class="icon icon-text-list-bullet"></span>
|
||||
<span class="icon-label">Bullets</span>
|
||||
</button-->
|
||||
</button--!>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,24 @@
|
||||
<div class="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded" v-bind:style="{left:toolbar_artifacts_x,top:toolbar_artifacts_y}">
|
||||
<div class="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded">
|
||||
|
||||
<div class="btn-group dark">
|
||||
<div class="btn-group light vertical">
|
||||
|
||||
<!--div id="search-dialog" class="dropdown bottom light center static" v-bind:class="{open:opened_dialog=='search'}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='search'}" v-on:click="open_dialog('search')" >
|
||||
<span class="icon icon-search"></span>
|
||||
<span class="icon-label">[[__("tool_search")]]</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="btn btn-icon btn-transparent"
|
||||
title="[[__("home")]]" href="/spaces"
|
||||
v-if="(!active_space.parent_space_id && !guest_nickname)">
|
||||
<span class="icon icon-folder"></span>
|
||||
</a>
|
||||
|
||||
<div class="dialog dialog-search">
|
||||
xinclude "./search.html"
|
||||
</div>
|
||||
</div-->
|
||||
<a class="btn btn-icon btn-transparent"
|
||||
title="Parent Folder"
|
||||
href="/folders/{{active_space.parent_space_id}}"
|
||||
v-if="(active_space.parent_space_id && !guest_nickname)">
|
||||
|
||||
<div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='shapes'}">
|
||||
<span class="icon icon-folder"></span>
|
||||
</a>
|
||||
|
||||
<button class="btn btn-divider"></button>
|
||||
|
||||
<div class="dropdown top left light" v-bind:class="{open:opened_dialog=='shapes'}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='shapes'}" v-on:click="open_dialog('shapes')">
|
||||
<span class="icon icon-shapes"></span>
|
||||
@ -28,11 +31,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()">
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()" v-bind:class="{active:active_tool=='scribble'}">
|
||||
<span class="icon icon-tool-scribble"></span>
|
||||
<span class="icon-label">[[__("tool_scribble")]]</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()" v-bind:class="{active:active_tool=='arrow'}">
|
||||
<span class="icon icon-tool-arrow"></span>
|
||||
<span class="icon-label">[[__("tool_arrow")]]</span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown bottom light center">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()">
|
||||
@ -44,14 +52,14 @@
|
||||
|
||||
<div class="dropdown bottom light center">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click=" add_artifact(active_space, 'text', null, $event)">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="active_tool='note'" v-bind:class="{active:active_tool=='note'}">
|
||||
<span class="icon icon-tool-text"></span>
|
||||
<span class="icon-label">[[__("tool_text")]]</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown bottom light center">
|
||||
<div class="dropdown top left light">
|
||||
<div class="btn-collapse">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')">
|
||||
<span class="icon icon-picture"></span>
|
||||
@ -64,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='zones'}">
|
||||
<div class="dropdown top left light" v-bind:class="{open:opened_dialog=='zones'}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')">
|
||||
<span class="icon icon-zone"></span>
|
||||
@ -79,7 +87,7 @@
|
||||
|
||||
<button class="btn btn-divider" v-show="logged_in"></button>
|
||||
|
||||
<div class="dropdown bottom light center" v-show="logged_in" v-bind:class="{open:opened_dialog=='background'}">
|
||||
<div class="dropdown top left center" v-show="logged_in" v-bind:class="{open:opened_dialog=='background'}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='background'}" v-on:click="open_dialog('background')">
|
||||
<span class="letter">bg</span>
|
||||
@ -92,6 +100,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="activate_access()">
|
||||
<span class="icon icon-share"></span>
|
||||
<span class="icon-label">[[ __('share') ]]</span>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<li v-on:click="edit_space_title()" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-tag"></span>
|
||||
<span>[[ __('rename') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
-->
|
||||
<button class="btn btn-transparent btn-icon-labeled" title="Start Presentation (others follow what you see)" v-on:click="toggle_present_mode()" v-bind:class="{open:present_mode}">
|
||||
<span class="icon icon-presentation"></span>
|
||||
<span class="icon-label">[[ __('present') ]]</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,42 +1,38 @@
|
||||
<div class="toolbar toolbar-properties" v-cloak v-show="active_space_loaded && !is_active_space_role('viewer')" v-bind:class="{in:toolbar_props_in,out:!toolbar_props_in}" v-bind:style="{left:toolbar_props_x,top:toolbar_props_y}" v-if="active_space_loaded">
|
||||
<div class="toolbar toolbar-properties" v-cloak v-show="active_space_loaded && !is_active_space_role('viewer')" v-bind:class="{in:toolbar_props_in,out:!toolbar_props_in}" v-if="active_space_loaded">
|
||||
|
||||
<div class="btn-group dark">
|
||||
<div class="dropdown topleft light"
|
||||
<div class="btn-group light vertical">
|
||||
<div class="dropdown top right light"
|
||||
v-bind:class="{open : opened_dialog.match('color') ,
|
||||
'option-1':opened_dialog=='color-fill' ,
|
||||
'option-2':opened_dialog=='color-stroke' ,
|
||||
'option-3':opened_dialog=='color-text',
|
||||
'options-3':selection_metrics.contains_text}">
|
||||
|
||||
<label
|
||||
class="dropdown-toggle btn btn-icon btn-transparent no-r-r"
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
v-on:click="open_dialog('color-fill')"
|
||||
v-bind:class="{open:opened_dialog=='color-fill'}">
|
||||
<span class="icon icon-tool-fill icon-sm"></span>
|
||||
<span class="jewel" v-bind:style="{'background-color':active_style.fill_color}"></span>
|
||||
</label>
|
||||
<label
|
||||
class="dropdown-toggle btn btn-icon btn-transparent no-r"
|
||||
</button><br>
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
v-bind:class="{open:opened_dialog=='color-stroke'}"
|
||||
v-on:click="open_dialog('color-stroke')">
|
||||
<span class="icon icon-tool-stroke icon-sm"></span>
|
||||
<span class="jewel jewel-stroke" v-bind:style="{'border-color':active_style.stroke_color}"></span>
|
||||
</label>
|
||||
<label
|
||||
class="dropdown-toggle btn btn-icon btn-transparent no-r-l"
|
||||
</button><br>
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
v-on:click="open_dialog('color-text')"
|
||||
v-bind:class="{open:opened_dialog=='color-text'}">
|
||||
<span class="icon icon-tool-text icon-sm"></span>
|
||||
<span class="jewel" v-bind:style="{'border-color':active_style.text_color}">{{active_style.font_size}}</span>
|
||||
</label>
|
||||
</button>
|
||||
<div class="dialog">
|
||||
{% include "./color.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dark">
|
||||
|
||||
<!-- <button class="btn btn-transparent btn-icon-labeled">
|
||||
<span class="icon icon-tool-eyedrop"></span>
|
||||
<span class="icon-label">Eyedrop</span>
|
||||
@ -45,7 +41,7 @@
|
||||
<button class="btn btn-divider"></button>
|
||||
-->
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-styles'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-styles'}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}">
|
||||
<span class="icon icon-text-styles"></span>
|
||||
@ -58,21 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='filter'}">
|
||||
<div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_images}">
|
||||
<!-- <div class="btn-collapse" v-bind:class="in:selection_metrics.count>0"> -->
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('filter')" v-bind:class="{open : opened_dialog=='filter'}">
|
||||
<span class="icon icon-contrast"></span>
|
||||
<span class="icon-label">[[__("tool_filter")]]</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dialog">
|
||||
{% include "./filter.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='type-align'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='type-align'}">
|
||||
<div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('type-align')" v-bind:class="{open : opened_dialog=='type-align'}">
|
||||
<span class="icon icon-text-align-left-alt"></span>
|
||||
@ -85,9 +67,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='layout'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='layout'}">
|
||||
|
||||
<div class="btn-collapse" v-bind:class="{in:selection_metrics.count>0}">
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('layout')" v-bind:class="{open : opened_dialog=='layout'}">
|
||||
<span class="icon icon-cluster"></span>
|
||||
<span class="icon-label">[[__("tool_layout")]]</span>
|
||||
@ -99,13 +81,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-settings'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-settings'}">
|
||||
|
||||
<div class="btn-collapse in">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-settings')" v-bind:class="{open : opened_dialog=='text-settings'}">
|
||||
<span class="icon icon-text-typeface"></span>
|
||||
<span class="icon-label">Font</span>
|
||||
</button>
|
||||
<span class="icon-label">Font</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dialog">
|
||||
@ -115,7 +97,7 @@
|
||||
|
||||
<button class="btn btn-divider"></button>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='object-options'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='object-options'}">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
|
||||
<span class="icon icon-cogwheel"></span>
|
||||
<span class="icon-label">[[__("more")]]</span>
|
||||
|
||||
@ -9,14 +9,11 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<link href="[[ '/images/favicon.png' | cdn ]]" rel="icon" type="image/x-icon" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,700,600,800,300|Montserrat:400,700|EB+Garamond|Vollkorn|Lato|Roboto|Source+Code+Pro|Ubuntu|Raleway|Playfair+Display|Crimson+Text' rel='stylesheet' type='text/css'>
|
||||
<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/ee1a3484-4d98-4f9f-9f55-020a7b37f3c5.css"/>
|
||||
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="[[ '/stylesheets/style.css' | cdn ]]">
|
||||
|
||||
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twemoji/1.3.2/twemoji.min.js"></script>
|
||||
|
||||
<script>
|
||||
window.socket_auth = '[[socket_auth]]';
|
||||
window.browser_lang = '[[locale]]';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user