Skip to content

Commit eea0d0b

Browse files
OdisByOdisBy
authored
Add link button for mobile (#469)
* Adding new Link Page Icon * Adding link page button * Adjusting toolbar to be scrollable
1 parent 0d31503 commit eea0d0b

5 files changed

Lines changed: 191 additions & 111 deletions

File tree

‎application/features/editor/src/androidMain/kotlin/io/writeopia/editor/features/editor/ui/screen/NoteEditorScreen.android.kt‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,8 @@ internal fun NoteEditorScreen(
166166
noteEditorViewModel::cutSelection,
167167
noteEditorViewModel::clearSelections,
168168
noteEditorViewModel::onAddCheckListClick,
169-
noteEditorViewModel::onAddListItemClick
169+
noteEditorViewModel::onAddListItemClick,
170+
noteEditorViewModel::addPage,
170171
)
171172
}
172173

@@ -323,7 +324,8 @@ private fun BottomScreen(
323324
cutSelection: () -> Unit = {},
324325
onClose: () -> Unit = {},
325326
onCheckItem: () -> Unit = {},
326-
onListItem: () -> Unit = {}
327+
onListItem: () -> Unit = {},
328+
onAddPage: () -> Unit = {},
327329
) {
328330
val edit by editState.collectAsState()
329331

@@ -367,7 +369,8 @@ private fun BottomScreen(
367369
onCut = cutSelection,
368370
onClose = onClose,
369371
checkboxClick = onCheckItem,
370-
listItemClick = onListItem
372+
listItemClick = onListItem,
373+
onAddPage = onAddPage,
371374
)
372375
}
373376
}

‎application/features/editor/src/commonMain/kotlin/io/writeopia/editor/features/editor/ui/desktop/edit/menu/SideEditorOptions.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -658,7 +658,7 @@ private fun TextOptions(
658658

659659
Title(WrStrings.links())
660660
Spacer(modifier = Modifier.height(4.dp))
661-
IconAndText(WrStrings.page(), WrIcons.file, addPage)
661+
IconAndText(WrStrings.page(), WrSdkIcons.linkPage, addPage)
662662
}
663663
}
664664

‎writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/components/EditionScreen.kt‎

Lines changed: 128 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
package io.writeopia.ui.components
22

33
import androidx.compose.foundation.clickable
4+
import androidx.compose.foundation.horizontalScroll
45
import androidx.compose.foundation.layout.PaddingValues
56
import androidx.compose.foundation.layout.Row
67
import androidx.compose.foundation.layout.Spacer
78
import androidx.compose.foundation.layout.padding
89
import androidx.compose.foundation.layout.size
910
import androidx.compose.foundation.layout.width
11+
import androidx.compose.foundation.rememberScrollState
1012
import androidx.compose.material.icons.Icons
1113
import androidx.compose.material.icons.filled.ContentCut
1214
import androidx.compose.material.icons.filled.DeleteOutline
@@ -36,6 +38,7 @@ fun EditionScreen(
3638
onDelete: () -> Unit = {},
3739
onCopy: () -> Unit = {},
3840
onCut: () -> Unit = {},
41+
onAddPage: () -> Unit = {},
3942
onClose: () -> Unit = {},
4043
) {
4144
val iconPadding = PaddingValues(vertical = 4.dp)
@@ -46,119 +49,137 @@ fun EditionScreen(
4649
Row(modifier = modifier.padding(8.dp), verticalAlignment = Alignment.CenterVertically) {
4750
val tint = MaterialTheme.colorScheme.onPrimary
4851

49-
Icon(
52+
Row(
5053
modifier = Modifier
51-
.clip(clipShape)
52-
.clickable {
53-
onSpanClick(Span.BOLD)
54-
}
55-
.size(iconSize)
56-
.padding(iconPadding),
57-
imageVector = Icons.Outlined.FormatBold,
58-
contentDescription = "BOLD",
54+
.weight(1f)
55+
.horizontalScroll(rememberScrollState()),
56+
verticalAlignment = Alignment.CenterVertically
57+
) {
58+
Icon(
59+
modifier = Modifier
60+
.clip(clipShape)
61+
.clickable {
62+
onSpanClick(Span.BOLD)
63+
}
64+
.size(iconSize)
65+
.padding(iconPadding),
66+
imageVector = Icons.Outlined.FormatBold,
67+
contentDescription = "BOLD",
5968
// contentDescription = stringResource(R.string.delete),
60-
tint = tint
61-
)
62-
63-
Icon(
64-
modifier = Modifier
65-
.clip(clipShape)
66-
.clickable {
67-
onSpanClick(Span.ITALIC)
68-
}
69-
.size(iconSize)
70-
.padding(iconPadding),
71-
imageVector = Icons.Outlined.FormatItalic,
72-
contentDescription = "ITALIC",
69+
tint = tint
70+
)
71+
72+
Icon(
73+
modifier = Modifier
74+
.clip(clipShape)
75+
.clickable {
76+
onSpanClick(Span.ITALIC)
77+
}
78+
.size(iconSize)
79+
.padding(iconPadding),
80+
imageVector = Icons.Outlined.FormatItalic,
81+
contentDescription = "ITALIC",
7382
// contentDescription = stringResource(R.string.delete),
74-
tint = tint
75-
)
76-
77-
Spacer(modifier = Modifier.width(spaceWidth))
78-
79-
Icon(
80-
modifier = Modifier
81-
.clip(clipShape)
82-
.clickable {
83-
onSpanClick(Span.UNDERLINE)
84-
}
85-
.size(iconSize)
86-
.padding(iconPadding),
87-
imageVector = Icons.Outlined.FormatUnderlined,
88-
contentDescription = "UNDERLINE",
83+
tint = tint
84+
)
85+
86+
Spacer(modifier = Modifier.width(spaceWidth))
87+
88+
Icon(
89+
modifier = Modifier
90+
.clip(clipShape)
91+
.clickable {
92+
onSpanClick(Span.UNDERLINE)
93+
}
94+
.size(iconSize)
95+
.padding(iconPadding),
96+
imageVector = Icons.Outlined.FormatUnderlined,
97+
contentDescription = "UNDERLINE",
8998
// contentDescription = stringResource(R.string.delete),
90-
tint = tint
91-
)
92-
93-
Spacer(modifier = Modifier.width(spaceWidth))
94-
95-
Icon(
96-
modifier = Modifier
97-
.clip(clipShape)
98-
.clickable(onClick = checkboxClick)
99-
.size(iconSize)
100-
.padding(iconPadding),
101-
imageVector = WrSdkIcons.checkbox,
102-
contentDescription = "Checkbox",
99+
tint = tint
100+
)
101+
102+
Spacer(modifier = Modifier.width(spaceWidth))
103+
104+
Icon(
105+
modifier = Modifier
106+
.clip(clipShape)
107+
.clickable(onClick = checkboxClick)
108+
.size(iconSize)
109+
.padding(iconPadding),
110+
imageVector = WrSdkIcons.checkbox,
111+
contentDescription = "Checkbox",
103112
// contentDescription = stringResource(R.string.delete),
104-
tint = tint
105-
)
106-
107-
Spacer(modifier = Modifier.width(spaceWidth))
108-
109-
Icon(
110-
modifier = Modifier
111-
.clip(clipShape)
112-
.clickable(onClick = listItemClick)
113-
.size(iconSize)
114-
.padding(iconPadding),
115-
imageVector = WrSdkIcons.list,
116-
contentDescription = "List item",
113+
tint = tint
114+
)
115+
116+
Spacer(modifier = Modifier.width(spaceWidth))
117+
118+
Icon(
119+
modifier = Modifier
120+
.clip(clipShape)
121+
.clickable(onClick = listItemClick)
122+
.size(iconSize)
123+
.padding(iconPadding),
124+
imageVector = WrSdkIcons.list,
125+
contentDescription = "List item",
117126
// contentDescription = stringResource(R.string.delete),
118-
tint = tint
119-
)
120-
121-
Spacer(modifier = Modifier.width(spaceWidth))
122-
123-
Icon(
124-
modifier = Modifier
125-
.clip(clipShape)
126-
.clickable(onClick = onCopy)
127-
.size(32.dp)
128-
.padding(iconPadding),
129-
imageVector = WrSdkIcons.copy,
130-
contentDescription = "Copy",
131-
tint = tint
132-
)
133-
134-
Spacer(modifier = Modifier.width(spaceWidth))
135-
136-
Icon(
137-
modifier = Modifier
138-
.clip(clipShape)
139-
.clickable(onClick = onCut)
140-
.size(32.dp)
141-
.padding(iconPadding),
142-
imageVector = Icons.Default.ContentCut,
143-
contentDescription = "Cut",
144-
tint = tint
145-
)
146-
147-
Spacer(modifier = Modifier.width(spaceWidth))
148-
149-
Icon(
150-
modifier = Modifier
151-
.clip(clipShape)
152-
.clickable(onClick = onDelete)
153-
.size(iconSize)
154-
.padding(iconPadding),
155-
imageVector = Icons.Default.DeleteOutline,
156-
contentDescription = "Delete",
127+
tint = tint
128+
)
129+
130+
Spacer(modifier = Modifier.width(spaceWidth))
131+
132+
Icon(
133+
modifier = Modifier
134+
.clip(clipShape)
135+
.clickable(onClick = onCopy)
136+
.size(32.dp)
137+
.padding(iconPadding),
138+
imageVector = WrSdkIcons.copy,
139+
contentDescription = "Copy",
140+
tint = tint
141+
)
142+
143+
Spacer(modifier = Modifier.width(spaceWidth))
144+
145+
Icon(
146+
modifier = Modifier
147+
.clip(clipShape)
148+
.clickable(onClick = onCut)
149+
.size(32.dp)
150+
.padding(iconPadding),
151+
imageVector = Icons.Default.ContentCut,
152+
contentDescription = "Cut",
153+
tint = tint
154+
)
155+
156+
Spacer(modifier = Modifier.width(spaceWidth))
157+
158+
Icon(
159+
modifier = Modifier
160+
.clip(clipShape)
161+
.clickable(onClick = onDelete)
162+
.size(iconSize)
163+
.padding(iconPadding),
164+
imageVector = Icons.Default.DeleteOutline,
165+
contentDescription = "Delete",
157166
// contentDescription = stringResource(R.string.delete),
158-
tint = tint
159-
)
160-
161-
Spacer(modifier = Modifier.weight(1F))
167+
tint = tint
168+
)
169+
170+
Spacer(modifier = Modifier.width(spaceWidth))
171+
172+
Icon(
173+
modifier = Modifier
174+
.clip(clipShape)
175+
.clickable(onClick = onAddPage)
176+
.size(iconSize)
177+
.padding(iconPadding),
178+
imageVector = WrSdkIcons.linkPage,
179+
contentDescription = "Link to page",
180+
tint = tint
181+
)
182+
}
162183

163184
Icon(
164185
modifier = Modifier
@@ -167,7 +188,7 @@ fun EditionScreen(
167188
.size(iconSize)
168189
.padding(iconPadding),
169190
imageVector = WrSdkIcons.close,
170-
contentDescription = "List item",
191+
contentDescription = "Close",
171192
// contentDescription = stringResource(R.string.delete),
172193
tint = tint
173194
)

‎writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/icons/WrSdkIcons.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import io.writeopia.ui.icons.all.ChevronDown
88
import io.writeopia.ui.icons.all.ChevronRight
99
import io.writeopia.ui.icons.all.ChevronUp
1010
import io.writeopia.ui.icons.all.Files
11+
import io.writeopia.ui.icons.all.Link
1112
import io.writeopia.ui.icons.all.SquareCheck
1213
import io.writeopia.ui.icons.all.WandSparkles
1314

@@ -30,4 +31,6 @@ object WrSdkIcons {
3031
val check: ImageVector = Check
3132

3233
val ai = WandSparkles
34+
35+
val linkPage: ImageVector = Link
3336
}

‎writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/icons/all/Link.kt‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
package io.writeopia.ui.icons.all
2+
3+
import androidx.compose.ui.graphics.Color
4+
import androidx.compose.ui.graphics.SolidColor
5+
import androidx.compose.ui.graphics.StrokeCap
6+
import androidx.compose.ui.graphics.StrokeJoin
7+
import androidx.compose.ui.graphics.vector.ImageVector
8+
import androidx.compose.ui.graphics.vector.path
9+
import androidx.compose.ui.unit.dp
10+
11+
val Link: ImageVector
12+
get() {
13+
if (_Link != null) {
14+
return _Link!!
15+
}
16+
ImageVector.Builder(
17+
name = "Link",
18+
defaultWidth = 24.dp,
19+
defaultHeight = 24.dp,
20+
viewportWidth = 24f,
21+
viewportHeight = 24f
22+
).apply {
23+
path(
24+
stroke = SolidColor(Color(0xFF000000)),
25+
strokeLineWidth = 2f,
26+
strokeLineCap = StrokeCap.Round,
27+
strokeLineJoin = StrokeJoin.Round
28+
) {
29+
moveTo(10f, 13f)
30+
arcToRelative(5f, 5f, 0f, isMoreThanHalf = false, isPositiveArc = false, 7.54f, 0.54f)
31+
lineToRelative(3f, -3f)
32+
arcToRelative(5f, 5f, 0f, isMoreThanHalf = false, isPositiveArc = false, -7.07f, -7.07f)
33+
lineToRelative(-1.72f, 1.71f)
34+
}
35+
path(
36+
stroke = SolidColor(Color(0xFF000000)),
37+
strokeLineWidth = 2f,
38+
strokeLineCap = StrokeCap.Round,
39+
strokeLineJoin = StrokeJoin.Round
40+
) {
41+
moveTo(14f, 11f)
42+
arcToRelative(5f, 5f, 0f, isMoreThanHalf = false, isPositiveArc = false, -7.54f, -0.54f)
43+
lineToRelative(-3f, 3f)
44+
arcToRelative(5f, 5f, 0f, isMoreThanHalf = false, isPositiveArc = false, 7.07f, 7.07f)
45+
lineToRelative(1.71f, -1.71f)
46+
}
47+
}.build().also { _Link = it }
48+
49+
return _Link!!
50+
}
51+
52+
@Suppress("ObjectPropertyName")
53+
private var _Link: ImageVector? = null

0 commit comments

Comments
 (0)