Skip to content

GitLab

Commit 58250a72 authored by mntmn's avatar mntmn
Browse files

WIP MNT design/UX cleanup

parent d19d0222
Hide whitespace changes
Inline Side-by-side
styles/space-sections.scss
View file @ 58250a72
......@@ -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;
......
styles/style.scss
View file @ 58250a72
......@@ -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
View file @ 58250a72
......@@ -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,
......
styles/toolbar.scss
View file @ 58250a72
......@@ -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;
}
styles/tools.scss
View file @ 58250a72
......@@ -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;
......
styles/vars.scss
View file @ 58250a72
......@@ -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;
......@@ -48,4 +44,4 @@ $gutter-c: 40px;
$gutter-d: 60px;
$gutter-e: 80px;
$folder-gutter: 20px;
\ No newline at end of file
$folder-gutter: 20px;
views/layouts/outer.html
View file @ 58250a72
......@@ -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">&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
View file @ 58250a72
......@@ -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>
......
views/partials/modal/access.html
View file @ 58250a72
......@@ -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
View file @ 58250a72
<!-- 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 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>
......
views/partials/tool/color.html
View file @ 58250a72
......@@ -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
View file @ 58250a72
<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
View file @ 58250a72
......@@ -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
View file @ 58250a72
<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="btn-group dark">
<!--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>
<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="dialog dialog-search">
xinclude "./search.html"
</div>
</div-->
<button class="btn btn-divider"></button>
<div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='shapes'}">
<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>
views/partials/tool/toolbar-object.html
View file @ 58250a72
<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>
......
views/spacedeck.html
View file @ 58250a72
......@@ -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 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]]';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal