WIP MNT design/UX cleanup

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 javascripts/maps
 javascripts/spacedeck.js
+public/stylesheets/*.css
+database.sqlite
 *.swp
 *~
 

package.json

@@ -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",

public/javascripts/spacedeck_sections.js

@@ -63,8 +63,8 @@ var SpacedeckSections = {
     active_style: {
       border_radius: 0,
       stroke: 0,
-      font_family: "Avenir W01",
+      font_family: "Inter",
-      font_size: 18,
+      font_size: 36,
       line_height: 1.5,
       letter_spacing: 0,
 
@@ -136,18 +136,8 @@ var SpacedeckSections = {
     ],
 
     fonts: [
-      "Arial",
+      "Inter",
-      "Courier",
+      "Courier"
-      "Georgia",
-      "Verdana",
-      "Comic Sans MS",
-      "Montserrat",
-      "Lato",
-      "Roboto",
-      "Crimson Text",
-      "EB Garamond",
-      "Vollkorn",
-      "Avenir W01"
     ],
 
     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,9 +1115,12 @@ 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);
+      // resize space
-      this.active_space.height=Math.max(er.y2+100, window.innerHeight);
+      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) {
         this._last_bounds_width = this.active_space.width;
@@ -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?");
@@ -1788,9 +1781,7 @@ var SpacedeckSections = {
       if (this.active_space_role=="viewer") {
         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";
     },

public/javascripts/spacedeck_spaces.js

@@ -273,9 +273,9 @@ var SpacedeckSpaces = {
 
               this.discover_zones();
 
-              //window.setTimeout(function() {
+              window.setTimeout(function() {
-              //  this.zoom_to_fit();
+                this.zoom_to_fit();
-              //}.bind(this),10);
+              }.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;

public/javascripts/spacedeck_whiteboard.js

@@ -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,8 +202,10 @@ 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;
 
       $scope.opened_dialog="none";
@@ -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);

routes/api/space_exports.js

@@ -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);
           }

routes/api/space_memberships.js

@@ -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."
       });
     }
 

styles/artifact.scss

@@ -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;

styles/button.scss

@@ -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 $black;
-    border: 1px solid rgba(0,0,0,0.1);
+    color: $black;
-    color: $medium;
     background-color: transparent;
     &:active {
       //box-shadow: inset 0 0 0 1px $dark;
@@ -263,9 +242,18 @@
   
   &.btn-transparent {
     background-color: transparent;
-    color: $medium;
+    color: $dark;
-    &.active {color: $darker !important; }
+    &.active {
-    &.open {color: white !important; }
+        //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 {
+// !btn-group
-  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 {
   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;
     }
   }
 
@@ -1159,4 +1125,4 @@
   margin: 4px;
   z-index: 100;
   border-radius: 50px;
-}
+}

styles/dialog.scss

@@ -125,8 +125,10 @@
   @include transition( all 0.125s ease-in-out);
   pointer-events: none; 
   background-color: $light;
-  color: $medium;
+  color: $dark;
-  &.dark {background-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);
@@ -228,4 +230,4 @@
   h4 .icon {
     height: 38px;
   }
-}
+}

styles/dropdown.scss

@@ -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-top-right-radius: $radius;
-      border-bottom-right-radius: $radius ;
+      border-bottom-right-radius: $radius;
     }
   }
 }
@@ -143,8 +140,7 @@ $predelay: 0;
 
   &.light > .dropdown-menu,
   &.light > .dialog {
-    background: $light;
+      background: white;
-    color: $medium;
   }
 
   > .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);
+          //transform: translate3d(-50%, -50%, 100px) scale(1);
-          -ms-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);
+      //@include transform-origin(center center);
-      -webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
+      //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);
     }
   }
 
@@ -230,10 +220,8 @@ $predelay: 0;
       top: auto;
       bottom: 100%;
       margin-bottom: 16px;
-      @include transform-origin(bottom left);
+      //@include transform-origin(bottom left);
-      -webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
+      //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);
     }
   }
   
@@ -243,10 +231,8 @@ $predelay: 0;
       top: auto;
       bottom: 100%;
       margin-bottom: 16px;
-      @include transform-origin(bottom center);
+      //@include transform-origin(bottom center);
-      -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+      //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);
     }
 
   }
@@ -257,33 +243,37 @@ $predelay: 0;
       top: 100%;
       bottom: auto;
       margin-top: -16px;
-      @include transform-origin(top center);
+      //@include transform-origin(top center);
-      -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+      //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);
     }
   }
-
+  
+  &.top.left {
+    > .dialog,
+    > .dropdown-menu {
+      left: 70px;
+      margin-top: -60px;
+    }
+  }
+  
   &.top.right {
     > .dialog,
     > .dropdown-menu {
       top: 100%;
       bottom: auto;
       left: auto;
-      right: 0;
+
-      margin-top: 16px;
+      right: 70px;
-      @include transform-origin(top right);
+      margin-top: -60px;
-      -webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+      
-          -ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+      //@include transform-origin(top right);
-              transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+      //transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
     }
     &.hover:hover,
     &.open {
       > .dialog,
       > .dropdown-menu {
-      -webkit-transform: translate3d(0%, 0%, 100px) scale(1);
+          //transform: translate3d(0%, 0%, 100px) scale(1);
-          -ms-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);
+          //transform: translate3d(-50%, 0%, 100px) scale(1);
-              -ms-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;
+          //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;
       }
     }
   }
@@ -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);
+    //transform: scale(0,0);
-        -ms-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;
-  }
+  }*/
-}
+}

styles/form-checkbox.scss

@@ -28,7 +28,6 @@
   line-height: 1.5;
   width: 100%;
   text-align: left;
-  color: $medium;
   font-weight: normal;
   cursor: pointer;
   border-radius: $radius;
@@ -139,4 +138,4 @@
   display: inline-block !important;
   width: auto !important;
   padding-right: 15px !important;
-}
+}

styles/form-select.scss

@@ -2,24 +2,14 @@
 @import "mixins";
 
 .input-select {
-  // background-color: rgba(255,255,255,0.04);
+  background-color: rgba(255,255,255,0.04);
-  // background-image: url('images/select_arrow.gif');
+  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%;

styles/form.scss

@@ -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();

styles/handles.scss

@@ -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;
+    top: 0px;
-    left: -1px;
+    left: 0px;
-    right: -1px;
+    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);
+      background-color: black;
-    cursor: move;
+      cursor: move;
   }
 }
 
@@ -428,15 +428,8 @@
     border-style: solid;
     border-width: 10px;
     border-color: transparent;
-    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
-       -moz-background-clip: padding-box;
+    transition: all .05s ease-in-out;
-            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;
   }
 
   div {

styles/header.scss

@@ -31,17 +31,14 @@
 }
 
 .header-left { 
-  @include transform-origin(center left);
   left: 0; 
   padding-left: 10px; 
 }
-.header-right { 
+.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;

styles/main.scss

@@ -2,7 +2,6 @@
 @import "mixins";
 
 .wrapper  {
-  //@include transition( all 0.25s ease-in-out);
   position: relative;
   margin: auto;
   max-width: 1160px;

styles/modal.scss

@@ -59,9 +59,9 @@
   }
   
   .close {
-    position: fixed;
+      margin-left: 44px;
-    margin: 44px 44px;
+      margin-bottom: 44px;
-    .icon {display: block; }
+      .icon {display: block; }
   }
   
   figure {
@@ -146,7 +146,6 @@
 .modal-header {
   padding: 30px 40px;
   position: relative;
-  color: $medium;
 }
 
 .close-search {
@@ -300,4 +299,4 @@
   // .btn-block + .btn-block {
   //   margin-left: 0;
   // }
-}
+}

styles/normalize.scss

@@ -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.
 //
@@ -420,4 +408,4 @@ table {
 td,
 th {
   padding: 0;
-}
+}

styles/space-sections.scss

@@ -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;
+  // user-select: all;
-  -ms-user-select: all;
-  -moz-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;
+  left: 0;
-  top: 0px;
+  top: 0;
   pointer-events: none;
   background-size: cover;
   background-repeat: no-repeat;

styles/style.scss

@@ -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);

styles/table.scss

@@ -8,10 +8,9 @@
 }
 .table {
   width: 100%;
-  color: $medium;;
   font-family: $main-font;
-  // border-radius: $radius;
+  border-radius: $radius;
-  // border: 2px solid rgba(0,0,0,0.0125) !important;
+  border: 2px solid rgba(0,0,0,0.0125);
 }
 
 .table thead > tr > th:first-child, 

styles/toolbar.scss

@@ -19,50 +19,19 @@
   }
 
   margin: auto;
-  //text-align: center;
   position: fixed;
-  bottom: 0px;
+  top: 10px;
-  //width: 100%;
   z-index: 3000;
-  padding: $gutter-b;
+  padding: 0;
   font-size: 0;
   line-height: 0;
 
-  transition-duration: 0.15s;
+  // FIXME questionable?
-  transition-timing-function: ease-in-out;
-  transition-delay: initial;
-  transition-property: opacity, transform;
-  @include backface-visibility(hidden);
   
-  @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;
+}
+

styles/tools.scss

@@ -33,10 +33,7 @@
   @include translate3d(0, 0, 0);
 
   // @include backface-visibility(hidden);
-  -webkit-perspective: 1000;
+  perspective: 1000;
-     -moz-perspective: 1000;
-      -ms-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;
+        perspective: 1000;
-           -moz-perspective: 1000;
-            -ms-perspective: 1000;
-                perspective: 1000;
 
         z-index: 1000;
 

styles/vars.scss

@@ -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;
+$main-font: Inter;
-$sec-font: Avenir W01;
+$sec-font: Inter;
 
-$font-size: 18px;
+$font-size: 12pt;
-$line-height: 24px;
+$line-height: 1.5em;
 
 $gutter-a: 10px;
 $gutter-b: 20px;
@@ -48,4 +44,4 @@ $gutter-c: 40px;
 $gutter-d: 60px;
 $gutter-e: 80px;
 
-$folder-gutter: 20px;
+$folder-gutter: 20px;

views/layouts/outer.html

@@ -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 href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet" type="text/css">
-
-    <link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/ee1a3484-4d98-4f9f-9f55-020a7b37f3c5.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">&copy; 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">&copy; 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>

views/partials/folders.html

@@ -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">
+  <div class="header-right pull-right">
-      <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="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>

views/partials/modal/access.html

@@ -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>
 

views/partials/space.html

@@ -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" >
@@ -140,14 +12,8 @@
 
     </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>
@@ -158,17 +24,13 @@
       <span class="icon icon-triangle-4-right"></span>
     </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 light zoom-bar" style="position:absolute;bottom:20px;right:20px;">
-
+    <button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()">
-  <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()">
       <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>

views/partials/tool/color.html

@@ -126,19 +126,11 @@
       <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>

views/partials/tool/layout.html

@@ -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>

views/partials/tool/text-styles.html

@@ -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>

views/partials/tool/toolbar-elements.html

@@ -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 light vertical">
+    
+    <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>
+      
+    <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)">
+      
+      <span class="icon icon-folder"></span>
+    </a>
 
-  <div class="btn-group dark">
+    <button class="btn btn-divider"></button>
 
-    <!--div id="search-dialog" class="dropdown bottom light center static" v-bind:class="{open:opened_dialog=='search'}">
+    <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=='search'}"  v-on:click="open_dialog('search')" >
-          <span class="icon icon-search"></span>
-          <span class="icon-label">[[__("tool_search")]]</span>
-        </button>
-      </div>
-
-      <div class="dialog dialog-search">
-         xinclude "./search.html" 
-      </div>
-    </div-->
-
-    <div class="dropdown bottom light center" 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>

views/partials/tool/toolbar-object.html

@@ -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="btn-group light vertical">
-    <div class="dropdown topleft light"
+    <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
+      <button
-        class="dropdown-toggle btn btn-icon btn-transparent no-r-r"
+        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>
+      </button><br>
-      <label
+      <button
-        class="dropdown-toggle btn btn-icon btn-transparent no-r"
+        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>
+      </button><br>
-      <label
+      <button
-         class="dropdown-toggle btn btn-icon btn-transparent no-r-l"
+         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="dropdown top light right" v-bind:class="{open:opened_dialog=='type-align'}">
-      <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="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>
+          <span class="icon-label">Font</span>
-      </button>
+        </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>

views/spacedeck.html

@@ -9,13 +9,10 @@
     <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 href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet' type='text/css'>
-    <link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/ee1a3484-4d98-4f9f-9f55-020a7b37f3c5.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]]';