rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement tags folder as experimental feature (#788)

Browse Source 
* feat: add tag folders support basics

* feat: add draggability to tags

* feat: add drag & drop draft

* feat: fold folders

* fix: do not select on fold / unfold tags

* style: clean the isValidTag call

* feat: add native folder toggle

* feat: add touch mobile support

* ui: add nicer design & icons

* style: render full-width tag items

* feat: nicer looking dropzone

* style: fix arguments

* fix: tag template rendering in list items

* feat: tag can be dragged over the whole item

* fix: cancel / reset title after save

* fix: disable drag completely when needed

* fix: invalid tag parents

* feat: add paying feature

* feat: with paid feature tooltip

* feat: tag has a plus feature

* feat: add premium modal

* style: simplif code

* refactor: extract feature_state & simplif code

* fix: icons and icons svg

* style: remove comment

* feat: tag folders naming

* feat: use the feature notification

* fix: tag folders copy

* style: variable names

* style: remove & clean comments

* refactor: remove is-mobile library

* feat: tags folder experimental (#10)

* feat: hide native folders behind experimental flag

* fix: better tags resizing

* fix: merge global window

* style: rename params

* refactor: remove level of indirection in feature toggle

* feat: recursively add tags to note on create (#9)

* fix: use add tags folder hierarchy & isTemplateItem (#13)

* fix: use new snjs add tag hierarchy

* fix: use new snjs isTemplateItem

* feat: tags folder premium (#774)

* feat: upgrade premium in tags section

refactor: move TagsSection to react

feat: show premium on Tag section

feat: keep drag and drop features always active

fix: drag & drop tweak with premium

feat: premium messages

fix: remove fill in svg icons

fix: change tag list color (temporary)

style: remove dead code

refactor: clarify names and modules

fix: draggable behind feature toggle

feat: add button in TagSection & design

* feat: fix features loading with app state (#775)

* fix: distinguish between app launch and start

* fix: update state for footer too

* fix: wait for application launch event

Co-authored-by: Laurent Senta <laurent@singulargarden.com>

* feat: tags folder with folder text design (#776)

* feat: add folder text

* fix: sn stylekit colors

* fix: root drop zone

* chore: upgrade stylekit

* fix: hide dropzone when feature is disabled

* chore: bump versions now that they are released

Co-authored-by: Mo <me@bitar.io>

* feat: tags folder design review (#785)

* fix: upgrade design after review

* fix: tweak dropzone

* fix: sync after assign parent

* fix: tsc error on build

* fix: vertical center the fold arrows

* fix: define our own hoist for react-dnd

* feat: hide fold when there are no folders

* fix: show children usability + resize UI

* fix: use old colors for now, theme compat

* fix: tweak alignment and add title

* fix: meta offset with folders

* fix: tweak tag size

* fix: observable setup

* fix: use link-off icon on dropzone

* fix: more tweak on text sizes

Co-authored-by: Mo <me@bitar.io>
This commit is contained in:
Laurent Senta
2021-12-23 14:34:02 +01:00
committed by GitHub
parent 4a5a202a37
commit 237cd91acd
33 changed files with 1048 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/_sn.scss
View File

@@ -1,11 +1,10 @@
/* Components and utilities that are good candidates for extraction to StyleKit. */
:root {
--sn-stylekit-grey-2: #f8f9fc;
}
.bg-grey-2 {
background-color: var(--sn-stylekit-grey-2);
.bg-grey-super-light {
background-color: var(--sn-stylekit-grey-super-light);
}
.h-90vh {

97
app/assets/stylesheets/_tags.scss
View File

@@ -51,7 +51,35 @@
margin-top: -5px;
}
.root-drop {
width: '100%';
padding: 12px;
opacity: 0;
transition: opacity 0.3s ease-in;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.sn-icon {
margin-right: 0.5rem;
}
&.active {
opacity: 1;
&.is-over {
background-color: var(--sn-stylekit-white);
color: var(--sn-stylekit-secondary-contrast-foreground-color);
}
}
}
.tag {
font-size: 14px;
line-height: 18px;
min-height: 30px;
padding: 5px 12px;
cursor: pointer;
@@ -65,17 +93,42 @@
align-items: center;
justify-content: space-between;
.sn-icon {
display: block;
margin: 0 auto;
&.hidden {
visibility: hidden;
}
}
> .tag-fold {
width: 22px;
display: flex;
align-items: center;
height: 100%;
}
> .tag-icon {
width: 10px;
opacity: 0.2;
font-size: var(--sn-stylekit-font-size-h2);
font-weight: bold;
margin-right: 6px;
display: flex;
align-items: center;
height: 100%;
&.draggable {
cursor: move;
}
&.propose-folders {
cursor: help;
}
}
> .title {
@extend .focus\:outline-none;
@extend .focus\:shadow-none;
font-size: 14px;
line-height: 18px;
width: 80%;
background-color: transparent;
font-weight: 600;
@@ -84,6 +137,7 @@
cursor: pointer;
text-overflow: ellipsis;
width: 75%;
flex-grow: 1;
// Required for Safari to avoid highlighting when dragging panel resizers
// Make sure to undo if it's selected (for editing)
@@ -118,21 +172,29 @@
}
}
> .menu {
font-size: 11px;
.meta {
padding-left: 3px;
> .item {
margin-right: 2px;
&.with-folders {
padding-left: 25px;
}
opacity: 0.5;
font-weight: bold;
clear: both;
margin-top: 2px;
margin-bottom: 2px;
> .menu {
font-size: 11px;
&:hover {
opacity: 1;
> .item {
margin-right: 2px;
}
opacity: 0.5;
font-weight: bold;
clear: both;
margin-top: 2px;
margin-bottom: 2px;
&:hover {
opacity: 1;
}
}
}
@@ -145,7 +207,8 @@
}
&:hover:not(.selected),
&.selected {
&.selected,
&.is-drag-over {
background-color: var(--sn-stylekit-secondary-contrast-background-color);
color: var(--sn-stylekit-secondary-contrast-foreground-color);