WebDev/spacedeck-open
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Spacedeck 6.0 CI WIP; more style, UX cleanups; fix account dialog; add more color swatches; new landing page

Browse Source
This commit is contained in:
mntmn
2020-04-08 20:45:30 +02:00
parent 58250a72ad
commit 80f9b0d93f
37 changed files with 664 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
views/partials/account.html
View File

@@ -1,16 +1,30 @@
<div id="team" class="dialog in" style="padding:100px;z-index:20000;position:absolute;width:100%;min-height:100%;background-color:#eee" v-if="active_view == 'account' && user" v-cloak>
<header id="dialog-header" class="header" v-if="(active_view == 'account' && user)" v-cloak>
<div v-cloak class="header-left pull-left">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-svg icon-sd6"></span>
</a>
<h5>Edit Account</h5>
</div>
<a href="/spaces" class="btn btn-round btn-icon btn-dark btn-md pull-right" style="position:absolute;top:30px;right:30px"><span class="icon icon-cross-0"></span></a>
<div class="header-right pull-right">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-cross-0"></span>
</a>
</div>
</header>
<div class="dialog-freestanding dialog in" v-if="active_view == 'account' && user" v-cloak>
<div class="dialog-tabs" style="margin:auto">
<div class="dialog-tab" v-bind:class="{open:account=='profile'}" v-on:click="account='profile'"><span>[[__("profile_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='language'}" v-on:click="account='language'"><span>[[__("language_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='notifications'}" v-on:click="account='notifications'"><span>[[__("notifications_caption")]]</span></div>
<div class="dialog-tab" v-if="user.account_type=='email'" v-bind:class="{open:account=='password'}" v-on:click="account='password'"><span>[[__("password_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='password'}" v-on:click="account='password'"><span>[[__("password_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='terminate'}" v-on:click="account='terminate'"><span>[[__("terminate_caption")]]</span></div>
</div>
<div class="dialog-section text-left" style="background-color:#f5f5f5;padding-top:40px;padding-bottom:40px">
<div class="dialog-section text-left">
<div class="collapse" v-bind:class="{in:account=='profile'}">
<div class="labels-inline relative" style="margin-bottom:40px">
<div class="form-group">
@@ -64,30 +78,16 @@
v-on:change="user.email_changed=true"
placeholder="mail@example.com">
<button class="btn btn-md btn-darken" v-if="user.account_type=='email'" v-on:click=" save_user()" style="margin-top:20px">[[__("ok")]]</button>
<button class="btn btn-md btn-dark" v-on:click=" save_user()" style="margin-top:20px">Save</button>
</div>
<div class="form-group" v-if="!user.confirmed_at">
<p v-if="!user.confirmed_at && !account_confirmed_sent">[[__("confirmation_sent_long")]]</p>
<span
class="btn btn-xs btn-stroke-darken btn-round"
v-on:click=" confirm_again()"
v-if="!user.confirmed_at && !account_confirmed_sent"
>[[__("send_again")]]</span>
<p v-if="account_confirmed_sent">
<span class="icon icon-check"></span> <span>[[__("confirmation_sent_another")]]</span>
</p>
</div>
<div class="form-group">
<!--div class="form-group">
<label class="label">Spacedeck.com Data Import</label>
<p v-if="!importables">No .ZIP files found in Spacedeck application folder.</p>
<ul>
<li v-for="f in importables">{{f}} <button v-on:click="start_zip_import(f)">Start Import</button></li>
</ul>
</div>
</div-->
</div>
</div>
@@ -121,7 +121,7 @@
</div>
<div class="collapse" v-bind:class="{in:account=='password'}">
<h4 class="modal-title">Change Password</h4>
<h4>Change Password</h4>
<div class="modal-section labels-inline">
<div class="form-group">
<label class="label">[[__("current_password")]]</label>
@@ -140,13 +140,11 @@
</div>
<div class="modal-footer">
<div class="btn-cluster">
<button
class="btn btn-transparent btn-block"
v-on:click="save_user_password(password_change_current, password_change_new, password_change_new_confirmation);" >
class="btn btn-dark btn-md"
v-on:click="save_user_password(password_change_current, password_change_new, password_change_new_confirmation);" >
[[__("change_password")]]
</button>
</div>
</div>
</div>
@@ -156,7 +154,7 @@
<p>[[__("terminate_warning2")]]</p>
</div>
<div class="labels-inline" v-if="user.account_type == 'email'">
<div class="labels-inline">
<div class="form-group">
<label class="label">[[__("current_password")]]</label>
<input v-model="account_remove_password" class="input input-white no-b" type="password">
@@ -170,7 +168,7 @@
<div class="center alert alert-danger" v-if="account_remove_error">{{account_remove_error}}</div>
</div>
<button class="btn btn-transparent btn-block" v-on:click="remove_account(account_remove_password, account_remove_feedback)">[[__("terminate_terminate")]]</button>
<button class="btn btn-stroke-darken btn-md" v-on:click="remove_account(account_remove_password, account_remove_feedback)">Terminate Account</button>
</div>
</div>

18
views/partials/folders.html
View File

@@ -1,9 +1,9 @@
<header id="folder-header" class="header" v-if="(active_view == 'folders' && active_folder)" v-cloak>
<div v-cloak class="header-left pull-left">
<a class="btn btn-stroke-darken btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-home"></span>
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-svg icon-sd6"></span>
</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-dark 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>[[ __('create_folder') ]]</span>
</button>
@@ -49,7 +49,7 @@
<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"
class="profile-avatar btn btn-md btn-icon btn-dark btn-round"
v-bind:style="background_image_style([user.avatar_thumb_uri])"
v-bind:class="{'has-avatar-image':!!user.avatar_thumb_uri}" v-on:click="show_account();">
<span class="icon icon-user" v-if="logged_in && !user.avatar_thumb_uri"></span></button>
@@ -81,12 +81,12 @@
</div>
<div class="btn-group dark round" id="meta-toggle" style="margin-right:10px">
<!--div class="btn-group dark round" id="meta-toggle" style="margin-right:10px">
<button class="btn btn-md btn-transparent btn-icon btn-icon" v-on:click="toggle_meta()">
<span class="jewel" style="color: white; background-color: red" v-if="meta_unseen>0">{{meta_unseen}}</span>
<span class="icon icon-menu"></span>
</button>
</div>
</div-->
</div>
</header>
@@ -98,10 +98,8 @@
<div id="folder-breadcrumb">
<a v-for="item in active_space_path" type="button" class="btn btn-sm btn-transparent" href="/{{item.space_type}}s/{{item._id}}" v-sd-droppable="handle_folder_drop;item">
<span>{{item.name}}</span>
<span class="seperator">/</span>
</a>
<span v-for="item in active_space_path" class="btn btn-sm btn-transparent" v-sd-droppable="handle_folder_drop;item">
<a href="/{{item.space_type}}s/{{item._id}}">{{item.name}}</a>&nbsp; ▶</span>
<a v-if="(active_space_role != 'admin')" type="button" class="btn btn-sm btn-transparent">
<span>{{active_folder.name}}</span>

38
views/partials/login.html
View File

@@ -1,17 +1,11 @@
<header id="landing-header" class="header" v-cloak v-if="(active_view == 'login' || active_view == 'signup' || active_view == 'password-reset' || active_view == 'password-confirm')">
<div class="header-left">
<a class="btn btn-transparent btn-nude" href="/"><img src="/images/sd5-logo.svg" width="190"></a>
<a class="btn btn-transparent btn-nude" href="/"><img src="/images/sd6-logo-black.svg" width="190"></a>
</div>
<div class="header-right pull-right">
<span class="btn-group dark round">
{% if (locale != "de") %}<a href="/t/de?r={{active_view}}" class="btn btn-transparent btn-md">Deutsch</a>{% endif %}
{% if (locale != "en") %}<a href="/t/en?r={{active_view}}" class="btn btn-transparent btn-md">English</a>{% endif %}
{% if (locale != "fr") %}<a href="/t/fr?r={{active_view}}" class="btn btn-transparent btn-md">Français</a>{% endif %}
</span>
<a class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a>
<a class="btn btn-md btn-blue btn-round" href="/signup">[[__("signup")]]</a>
<a v-if="active_view != 'login'" class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a>
<a v-if="active_view != 'signup'" class="btn btn-md btn-dark btn-round" href="/signup">[[__("signup")]]</a>
</div>
</header>
@@ -23,7 +17,7 @@
<div id="login" v-bind:class="{active : active_view == 'login'}">
<div class="content">
<form v-on:submit="login_submit(user_forms_email, login_password, $event)">
<h4>[[__("login")]]</h4>
<h3>Login</h3>
<div class="tight">
<div class="form-group">
@@ -34,16 +28,15 @@
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">
<button type="submit" class="btn btn-dark btn-block">
<span v-show="!loading_user">[[__("login")]]</span>
<span v-show="loading_user">[[__("logging_in")]]</span>
</button>
<div class="center alert alert-danger" v-if="login_error">{{login_error}}</div>
<div class="pull-right">
<a class="btn btn-xs btn-darken" href="/signup">[[__("signup")]]</a>&nbsp;
<a class="btn btn-xs btn-darken" href="/password-reset">[[__("reset_password")]]</a>
<div style="margin-top:2em">
<a href="/password-reset">Forgot Password</a>
</div>
</form>
</div>
@@ -51,7 +44,7 @@
<div id="signup" v-bind:class="{active : active_view == 'signup'}">
<div class="content">
<form v-on:submit="signup_submit($event, user_forms_name, user_forms_email, signup_password, signup_password_confirmation)">
<form v-on:submit="signup_submit($event, user_forms_name, user_forms_email, signup_password, signup_password_confirmation, signup_invite_code)">
<h4>[[__("signup")]]</h4>
<div class="tight">
@@ -75,19 +68,22 @@
<div class="form-group">
<input class="input" id="user-password-confirmation" required type="password" v-model="signup_password_confirmation" placeholder="[[__("password_confirmation")]]">
</div>
<div class="form-group">
<input class="input" id="invite-code" required type="text" v-model="signup_invite_code" placeholder="Invite Code">
</div>
</div>
<div style="margin-top: -7px; margin-bottom: 7px;"><small>By signing up you agree to our <a href="/terms" target="_blank">TOS</a> and <a href="/privacy" target="_blank">Privacy Policy.</a></small><br/>
</div>
<!--div style="margin-top: -7px; margin-bottom: 7px;"><small>By signing up you agree to our <a href="/terms" target="_blank">TOS</a> and <a href="/privacy" target="_blank">Privacy Policy.</a></small><br/>
</div-->
<button class="btn btn-primary btn-block">
<button class="btn btn-dark btn-block">
<span v-if="!creating_user">[[__("signup")]]</span>
<span v-if="creating_user">[[__("signing_up")]]</span>
</button>
<div class="center alert alert-danger" style="width:100%;" v-if="signup_error">{{signup_error}}</div>
<a class="btn btn-link btn-block" href="/login" style="margin-top: 20px">[[__("login")]]</a>
</form>
</div>
</div>
@@ -102,7 +98,7 @@
</div>
</div>
<div class="text-center alert alert-danger" v-if="password_reset_error">{{password_reset_error}}</div>
<button class="btn btn-primary btn-block" v-on:click="password_reset_submit($event, reset_email)">[[__("reset_password")]]</button>
<button class="btn btn-dark btn-block" v-on:click="password_reset_submit($event, reset_email)">[[__("reset_password")]]</button>
</form>
</div>
<div class="content" v-if="password_reset_send==true">
@@ -127,7 +123,7 @@
</div>
<div class="text-center alert alert-danger" v-if="password_reset_confirm_error">{{password_reset_confirm_error}}</div>
<button class="btn btn-primary btn-block" v-on:click="password_reset_confirm($event, signup_password, signup_password_confirmation)">[[__("save")]]</button>
<button class="btn btn-dark btn-block" v-on:click="password_reset_confirm($event, signup_password, signup_password_confirmation)">[[__("save")]]</button>
</form>
</div>
</div>

8
views/partials/space.html
View File

@@ -43,9 +43,8 @@
<div class="space-empty" v-cloak v-if="active_view == 'space' && !present_mode && active_space_artifacts.length == 0">
<div class="table-fake">
<div class="cell">
<p>Click anywhere to add content.<br>
You can also drop images, sounds and video<br>
or use copy and paste.</p>
<p>Use the toolbar to add content.<br>
You can also drop images or sound and video files.</p>
</div>
</div>
</div>
@@ -127,7 +126,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>
@@ -338,7 +336,7 @@
<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 class="btn-group light zoom-bar" style="position:absolute;bottom:20px;right:20px;">
<div class="btn-group light zoom-bar">
<button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()">
<span class="icon icon-plus"></span>
</button>

6
views/partials/tool/layout.html
View File

@@ -1,6 +1,6 @@
<div id="layout" class="relative">
<div class="dialog-section no-p-b">
<div class="">
<div class="dialog-section">
<div class="btn-group">
<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="">
<div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()">
<span class="icon icon-align-center-horizontal"></span>
</button>

105
views/partials/tool/shapes.html
View File

@@ -1,69 +1,48 @@
<h4 class="dialog-title">[[__("tool_shape")]]</h4>
<div id="shapes">
<div class="dialog-section no-p-h" style="white-space: normal;">
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)">
<span class="icon icon-shape-circle"></span>
<span class="icon-label">[[__("tool_circle")]]</span>
</button>
<div class="dialog-section">
<div class="btn-group">
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)">
<span class="icon icon-shape-circle"></span>
<span class="icon-label">[[__("tool_circle")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
<span class="icon icon-shape-hexagon"></span>
<span class="icon-label">[[__("tool_hexagon")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_square")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
<span class="icon icon-shape-bubble"></span>
<span class="icon-label">[[__("tool_bubble")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
<span class="icon icon-shape-cloud"></span>
<span class="icon-label">[[__("tool_cloud")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
<span class="icon icon-shape-burst"></span>
<span class="icon-label">[[__("tool_burst")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
<span class="icon icon-shape-star"></span>
<span class="icon-label">[[__("tool_star")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
<span class="icon icon-shape-heart"></span>
<span class="icon-label">[[__("tool_heart")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
<span class="icon icon-shape-hexagon"></span>
<span class="icon-label">[[__("tool_hexagon")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_square")]]</span>
</button>
<!--button class="btn btn-icon-labeled btn-transparent rot45" v-on:click="add_shape('diamond',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_diamond")]]</span>
</button-->
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
<span class="icon icon-shape-bubble"></span>
<span class="icon-label">[[__("tool_bubble")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
<span class="icon icon-shape-cloud"></span>
<span class="icon-label">[[__("tool_cloud")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
<span class="icon icon-shape-burst"></span>
<span class="icon-label">[[__("tool_burst")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
<span class="icon icon-shape-star"></span>
<span class="icon-label">[[__("tool_star")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
<span class="icon icon-shape-heart"></span>
<span class="icon-label">[[__("tool_heart")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()">
<span class="icon icon-tool-arrow"></span>
<span class="icon-label">[[__("tool_arrow")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_line()">
<span class="icon icon-tool-line"></span>
<span class="icon-label">[[__("tool_line")]]</span>
</button>
</div>
</div>
</div>
<!--
<div class="dialog-section no-p">
<div class="btn-cluster">
<button class="btn btn-transparent text-center"> Upload </button>
<button class="btn btn-transparent text-center" v-on:click="start_drawing_scribble()"> Draw </button>
</div>
</div>
-->

6
views/partials/tool/toolbar-elements.html
View File

@@ -8,12 +8,12 @@
<span class="icon icon-folder"></span>
</a>
<a class="btn btn-icon btn-transparent"
<a class="btn btn-icon btn-dark"
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>
<span class="icon icon-sd6 icon-svg"></span>
</a>
<button class="btn btn-divider"></button>
@@ -45,7 +45,7 @@
<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()">
<span class="icon icon-upload"></span>
<span class="icon-label" >[[__("tool_upload")]]</span>
<span class="icon-label" >Media</span>
</button>
</div>
</div>

2
views/partials/tool/toolbar-object.html
View File

@@ -45,7 +45,7 @@
<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>
<span class="icon-label">styles</span>
<span class="icon-label">Styles</span>
</button>
</div>

6
views/partials/tool/zones.html
View File

@@ -2,11 +2,11 @@
<div id="zones" style="max-height:500px;overflow-y:scroll">
<div class="dialog-section">
<p v-if="zones.length<2">
<!--p v-if="zones.length<2">
Turn your Space into a zooming presentation by placing some Zones and switch through them when presenting.
</p>
</p-->
<button v-on:click="add_zone()" class="btn btn-sm btn-primary">[[__("add_zone")]]</button>
<button v-on:click="add_zone()" class="btn btn-sm btn-dark">[[__("add_zone")]]</button>
</div>
<div class="dialog-section no-p" v-for="z in zones | orderBy 'order'" style="white-space: nowrap;text-align:left;cursor:pointer" v-on:click="zoom_to_zone(z)">