(dev) Redesign Addons page in the Settings [SCI-10002-core]

This commit is contained in:
Gregor Lasnibat 2024-01-28 12:07:06 +01:00
parent edce20e303
commit 6f72727e38
4 changed files with 85 additions and 58 deletions

View file

@ -9,9 +9,9 @@
target="_blank"> target="_blank">
<span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span> <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
</a> </a>
<p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"> <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
{{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }} {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }}
</p> </div>
</template> </template>
<template v-else-if="isMac"> <template v-else-if="isMac">
@ -23,9 +23,9 @@
target="_blank"> target="_blank">
<span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span> <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
</a> </a>
<p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"> <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
{{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }} {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }}
</p> </div>
</template> </template>
<template v-else> <template v-else>
@ -39,11 +39,11 @@
target="_blank"> target="_blank">
<span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span> <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
</a> </a>
<p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"> <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
{{ i18n.t('users.settings.account.addons.desktop_app.version', {{ i18n.t('users.settings.account.addons.desktop_app.version',
{ version: this.responseData[0]['version']}) { version: this.responseData[0]['version']})
}} }}
</p> </div>
</div> </div>
<div class="ml-2"> <div class="ml-2">
@ -55,7 +55,7 @@
target="_blank"> target="_blank">
<span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span> <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
</a> </a>
<p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"> <p class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
{{ i18n.t('users.settings.account.addons.desktop_app.version', {{ i18n.t('users.settings.account.addons.desktop_app.version',
{ version: this.responseData[1]['version']}) { version: this.responseData[1]['version']})
}} }}
@ -66,6 +66,7 @@
<a :href="'https://knowledgebase.scinote.net/en/knowledge/how-to-use-scinote-edit'" <a :href="'https://knowledgebase.scinote.net/en/knowledge/how-to-use-scinote-edit'"
:title="i18n.t('users.settings.account.addons.more_info')" :title="i18n.t('users.settings.account.addons.more_info')"
class="text-sn-blue"
target="_blank"> target="_blank">
<span class="sn-icon sn-icon-open"></span> <span class="sn-icon sn-icon-open"></span>
{{ i18n.t('users.settings.account.addons.more_info') }} {{ i18n.t('users.settings.account.addons.more_info') }}

View file

@ -3,83 +3,107 @@
<%= render partial: 'users/settings/sidebar' %> <%= render partial: 'users/settings/sidebar' %>
<div class="tab-content user-account-addons"> <div class="tab-content user-account-addons">
<div class="tab-pane content-pane active" role="tabpanel"> <div role="tabpanel">
<div> <h1 id="scinote-addons-title" class="mt-0 pb-1.5 text-sn-black"><%= t('users.settings.account.addons.title') %></h1>
<h1 class="addons-title"><%= t('users.settings.account.addons.title') %></h1>
<div> <div id="scinote-addons-wrapper" class="flex flex-col bg-sn-white p-4 rounded mb-6">
<h2 class="addons-subtitle" ><%= t('users.settings.account.addons.scinote_addons') %></h2> <h2 class="my-0 pb-6 text-sn-black" ><%= t('users.settings.account.addons.scinote_addons') %></h2>
<div data-hook="settings-addons-container"> <div data-hook="settings-addons-container">
<em data-hook="settings-addons-no-addons"> <em data-hook="settings-addons-no-addons">
<%= t('users.settings.account.addons.no_addons') %> <%= t('users.settings.account.addons.no_addons') %>
</em> </em>
</div> </div>
</div>
</div> </div>
<br>
<%# scinote edit %>
<% if ENV['ASSET_SYNC_URL'].present? %> <% if ENV['ASSET_SYNC_URL'].present? %>
<div class="panel panel-default"> <div class="bg-sn-white rounded p-4 mb-6">
<div class="panel-body"> <div class="font-bold my-0 pb-2 text-sn-black"><%= t('users.settings.account.addons.desktop_app.title') %></div>
<div class="row"> <div class="pb-6 text-sn-dark-grey">
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-9"> <%= t('users.settings.account.addons.desktop_app.description') %>
<p class="manuscript-title"><%= t('users.settings.account.addons.desktop_app.title') %></p> </div>
<p class="manuscript-description"> <div id="scinoteEditDownload" data-behaviour="vue">
<span><%= t('users.settings.account.addons.desktop_app.description') %></span> <scinote-edit-download data="<%= @user_agent %>">
</p><br/>
<div id="scinoteEditDownload" data-behaviour="vue">
<scinote-edit-download data="<%= @user_agent %>">
</div>
</div>
</div> </div>
</div>
</div> </div>
<% end %> <% end %>
<div class="row printer-settings">
<div class="col-xs-12 col-sm-12"> <%# label printers %>
<h2 class="addons-subtitle"><%= t('users.settings.account.addons.label_printers') %></h2> <div id="printer-settings" class="flex flex-col gap-6 rounded bg-sn-white mb-6 p-4">
<div class="printers-container"> <h2 class="my-0 text-sn-black"><%= t('users.settings.account.addons.label_printers') %></h2>
<div class="printer">
<div class="header"> <%# zebra printer %>
<div class="title"> <div class="flex flex-row justify-between">
<%= t('users.settings.account.addons.zebra_printer.title') %> <%# left part %>
</div> <div id="left-part" class="flex flex-col">
<div class="control"> <%# title %>
<%= t('users.settings.account.addons.printers.enabled') %> <div class="flex flex-row justify-between pb-2">
<i class="sn-icon sn-icon-check"></i> <div class="font-bold text-sn-black">
</div> <%= t('users.settings.account.addons.zebra_printer.title') %>
</div> </div>
<div class="description"> </div>
<%= t('users.settings.account.addons.zebra_printer.description') %> <%# description text %>
</div> <div class="text-sn-dark-grey pb-6">
<%= link_to t('users.settings.account.addons.printers.details'), zebra_settings_path(), class: 'printer-details' %> <%= t('users.settings.account.addons.zebra_printer.description') %>
</div>
<%# button %>
<div>
<%= link_to t('users.settings.account.addons.printers.details'), zebra_settings_path(), class: 'text-sn-blue' %>
</div> </div>
</div> </div>
<div class="printers-container"> <%# right-part %>
<div class="printer"> <div id="right-part" class="flex flex-row min-w-fit items-start">
<div class="header"> <div class="flex items-center gap-2">
<div class="title"> <div class="text-sn-black">
<%= t('users.settings.account.addons.fluics_printer.title') %>
</div>
<div class="control">
<%= t('users.settings.account.addons.printers.enabled') %> <%= t('users.settings.account.addons.printers.enabled') %>
<i class="sn-icon sn-icon-check"></i>
</div> </div>
<i class="sn-icon sn-icon-check"></i>
</div>
</div>
</div>
<%# solid line divider %>
<div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px"></div>
<%# fluics printer %>
<div class="flex flex-row justify-between">
<%# left part %>
<div id="left-part" class="flex flex-col">
<%# title %>
<div class="flex flex-row justify-between pb-2">
<div class="font-bold text-sn-black">
<%= t('users.settings.account.addons.fluics_printer.title') %>
</div> </div>
<div class="description"> </div>
<%= t('users.settings.account.addons.fluics_printer.description') %> <%# description text %>
</div> <div class="text-sn-dark-grey pb-6">
<%= t('users.settings.account.addons.fluics_printer.description') %>
</div>
<%# button %>
<div>
<% if !@label_printer_any && can_manage_label_printers? %> <% if !@label_printer_any && can_manage_label_printers? %>
<%= link_to label_printers_path(), class: 'printer-details btn btn-primary' do %> <%= link_to label_printers_path(), class: 'printer-details btn btn-primary' do %>
<i class="fas fa-key"></i> <%= t('users.settings.account.addons.printers.set_up') %>
<%= t('users.settings.account.addons.printers.enter_api_key') %>
<% end %> <% end %>
<% else %> <% else %>
<%= link_to t('users.settings.account.addons.printers.printer_details'), label_printers_path(), class: 'printer-details' %> <%= link_to t('users.settings.account.addons.printers.details'), label_printers_path(), class: 'text-sn-blue' %>
<% end %> <% end %>
</div> </div>
</div> </div>
<%# right-part %>
<div id="right-part" class="flex flex-row min-w-fit items-start">
<div class="flex items-center gap-2">
<div class="text-sn-black">
<%= t('users.settings.account.addons.printers.enabled') %>
</div>
<i class="sn-icon sn-icon-check"></i>
</div>
</div>
</div> </div>
</div> </div>
<%# Integrations inserted here via deface %>
</div> </div>
<div class="tab-pane tab-pane-settings" role="tabpanel"></div> <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
</div> </div>

View file

@ -623,6 +623,7 @@ class Extends
results/index results/index
protocols/show protocols/show
preferences/index preferences/index
addons/index
) )
DEFAULT_USER_NOTIFICATION_SETTINGS = { DEFAULT_USER_NOTIFICATION_SETTINGS = {

View file

@ -2792,6 +2792,7 @@ en:
printer_details: "Printer details" printer_details: "Printer details"
details: "Details" details: "Details"
enter_api_key: "Enter API key" enter_api_key: "Enter API key"
set_up: "Set up"
enabled: "Enabled" enabled: "Enabled"
fluics_printer: fluics_printer:
title: "FLUICS Print" title: "FLUICS Print"