mirror of
https://github.com/kadisonm/obsidian-homework-plugin.git
synced 2026-07-22 08:40:33 +00:00
Adjust ui styling
This commit is contained in:
KadisonM
parent
a7bb8cb98a
commit
0f9cf9536a
8 changed files with 247 additions and 198 deletions
0
TODO.md
Normal file
0
TODO.md
Normal file
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"id": "tickaway",
|
||||
"name": "Tickaway",
|
||||
"version": "2.0.0",
|
||||
"id": "homework-manager",
|
||||
"name": "Homework Manager",
|
||||
"version": "1.1.1",
|
||||
"minAppVersion": "0.15.0",
|
||||
"description": "Adds a simple task modal so you can tick away your to-dos with ease.",
|
||||
"description": "Keeps track of homework through a to-do list.",
|
||||
"author": "Kadison McLellan",
|
||||
"authorUrl": "https://github.com/KadisonM",
|
||||
"fundingUrl": "https://www.buymeacoffee.com/kadisonm",
|
||||
|
|
|
|||
55
src/creation-modal.ts
Normal file
55
src/creation-modal.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import TickawayPlugin from './main';
|
||||
import { App, ButtonComponent, Modal, setIcon, Setting } from 'obsidian';
|
||||
import { render } from "preact";
|
||||
import { StringTypes } from './data-manager';
|
||||
import { Section } from './data-manager';
|
||||
|
||||
export default class CreationModal extends Modal {
|
||||
plugin: TickawayPlugin
|
||||
type: StringTypes
|
||||
parent: string
|
||||
finished: () => void;
|
||||
|
||||
constructor(app: App, plugin: TickawayPlugin, type: StringTypes, parent: string, finished: () => void) {
|
||||
super(app);
|
||||
this.plugin = plugin;
|
||||
this.type = type;
|
||||
this.parent = parent;
|
||||
this.finished = finished;
|
||||
}
|
||||
|
||||
async createSection() {
|
||||
const {contentEl} = this;
|
||||
|
||||
const title = contentEl.createEl("h1", { text: "Add new section" });
|
||||
|
||||
const inputText = contentEl.createEl("input", {type: "text", placeholder: "Enter section name"});
|
||||
inputText.focus();
|
||||
|
||||
const buttonDiv = contentEl.createEl("div");
|
||||
buttonDiv.addClass("creation-modal-footer");
|
||||
|
||||
new Setting(contentEl)
|
||||
.addButton((btn) =>
|
||||
btn
|
||||
.setButtonText("Done")
|
||||
.setCta()
|
||||
.onClick(() => {
|
||||
this.plugin.data.addItem(new Section(inputText.value.trim(), this.parent, ""));
|
||||
this.finished();
|
||||
this.close();
|
||||
}));
|
||||
}
|
||||
|
||||
async onOpen() {
|
||||
const {contentEl} = this;
|
||||
|
||||
if (this.type === "Section") {
|
||||
this.createSection();
|
||||
}
|
||||
}
|
||||
|
||||
async onClose() {
|
||||
this.contentEl.empty();
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import TickawayPlugin from './main';
|
|||
import { v1 as uuidv1 } from 'uuid';
|
||||
|
||||
type AllTypes = Project | Section | Task | SubTask;
|
||||
type StringTypes = "Item" | "Project" | "Section" | "Task" | "SubTask"
|
||||
export type StringTypes = "Project" | "Section" | "Task" | "SubTask"
|
||||
|
||||
abstract class Item {
|
||||
id: string;
|
||||
|
|
@ -14,7 +14,7 @@ abstract class Item {
|
|||
}
|
||||
}
|
||||
|
||||
class Project extends Item {
|
||||
export class Project extends Item {
|
||||
type: "Project" = "Project";
|
||||
children: string[] = [];
|
||||
|
||||
|
|
@ -23,19 +23,19 @@ class Project extends Item {
|
|||
}
|
||||
}
|
||||
|
||||
class Section extends Item {
|
||||
export class Section extends Item {
|
||||
type: "Section" = "Section";
|
||||
children: string[] = [];
|
||||
constructor(
|
||||
name: string,
|
||||
public parent: string,
|
||||
public sort: string
|
||||
public sort?: string
|
||||
) {
|
||||
super(name);
|
||||
}
|
||||
}
|
||||
|
||||
class Task extends Item {
|
||||
export class Task extends Item {
|
||||
type: "Task" = "Task";
|
||||
children: string[] = [];
|
||||
constructor(
|
||||
|
|
@ -49,7 +49,7 @@ class Task extends Item {
|
|||
}
|
||||
}
|
||||
|
||||
class SubTask extends Item {
|
||||
export class SubTask extends Item {
|
||||
type: "SubTask" = "SubTask";
|
||||
constructor(
|
||||
id: string,
|
||||
|
|
@ -163,6 +163,14 @@ export class DataManager {
|
|||
addItem(item: AllTypes) {
|
||||
this.data.items.push(item);
|
||||
|
||||
if (item.type !== "Project") {
|
||||
const parent = this.getItem(item.parent);
|
||||
|
||||
if (parent && parent.type !== "SubTask") {
|
||||
parent.children.push(item.id);
|
||||
}
|
||||
}
|
||||
|
||||
return item.id;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ interface Props {
|
|||
};
|
||||
|
||||
export function MenuItem({ title, icon, onClick, checked, attributeMessage, attributePosition }: Props) {
|
||||
console.log(checked)
|
||||
const element = useRef(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
|
|
@ -21,7 +20,7 @@ export function MenuItem({ title, icon, onClick, checked, attributeMessage, attr
|
|||
});
|
||||
|
||||
return (
|
||||
<div onClick={onClick} class={checked ? "menu-item tappable mod-checked" : "menu-item tappable"} aria-label={attributeMessage} data-tooltip-position={attributePosition}>
|
||||
<div onClick={onClick} class={checked === true ? "menu-item tappable mod-checked" : "menu-item tappable"} aria-label={attributeMessage} data-tooltip-position={attributePosition}>
|
||||
<div ref = {element} class="menu-item-icon"/>
|
||||
<div class="menu-item-title"> {title} </div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useContext } from 'preact/hooks';
|
||||
import { useContext, useLayoutEffect } from 'preact/hooks';
|
||||
import { Project } from 'src/data-manager';
|
||||
|
||||
import { DataContext, ProjectContext } from "src/ui/modal";
|
||||
|
|
@ -14,8 +14,6 @@ export default function Body() {
|
|||
|
||||
const project = data.getItem(projectId) as Project;
|
||||
|
||||
console.log(project);
|
||||
|
||||
if (!project)
|
||||
return (<></>)
|
||||
|
||||
|
|
@ -29,9 +27,12 @@ export default function Body() {
|
|||
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
console.log("refreshed")
|
||||
});
|
||||
|
||||
return (
|
||||
<div class={"body"}>
|
||||
<Section text="Test Section" onDropdownClick={onDropdownClick} onNewTaskClick={onNewTaskClick}/>
|
||||
<div class={"body"}>
|
||||
{
|
||||
sections.map((sectionId: string) => (
|
||||
<Section
|
||||
|
|
|
|||
|
|
@ -1,9 +1,24 @@
|
|||
import { ActionButton } from "src/ui/components/action-button";
|
||||
import CreationModal from "src/creation-modal";
|
||||
import { ModalContext, ProjectContext, DataContext } from "..";
|
||||
import { useContext } from "preact/hooks";
|
||||
|
||||
export default function Footer() {
|
||||
const {projectId, setProjectId} = useContext(ProjectContext);
|
||||
const modal = useContext(ModalContext);
|
||||
|
||||
console.log(modal);
|
||||
console.log(projectId);
|
||||
|
||||
const newSection = () => {
|
||||
|
||||
if (modal) {
|
||||
console.log(projectId);
|
||||
new CreationModal(modal.app, modal.plugin, "Section", projectId, () => {
|
||||
print("Set id")
|
||||
setProjectId(projectId);
|
||||
}).open();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const newTask = () => {
|
||||
|
|
|
|||
331
styles.css
331
styles.css
|
|
@ -1,182 +1,153 @@
|
|||
.tickaway .tickaway-modal {
|
||||
.icon-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.section-dropdown {
|
||||
background-color: none;
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.section-name {
|
||||
font-size: var(--h3-size);
|
||||
font-weight: var(--font-normal);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
color: var(--icon-color);
|
||||
opacity: var(--icon-opacity);
|
||||
}
|
||||
|
||||
& * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.section-name {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
background-color: var(--background-modifier-hover);
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
border-top: var(--divider-width) solid var(--divider-color);
|
||||
|
||||
padding: var(--size-4-4) 0 0 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
border-radius: var(--button-radius);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--background-modifier-border-hover);
|
||||
background-color: var(--background-secondary);
|
||||
box-shadow: none;
|
||||
font-size: var(--font-ui-small);
|
||||
justify-content: flex-end;
|
||||
min-height: 18px;
|
||||
padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
|
||||
user-select: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
cursor: var(--cursor);
|
||||
margin: none;
|
||||
gap: var(--size-4-2);
|
||||
|
||||
& * {
|
||||
color: var(--icon-color);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
opacity: var(--icon-opacity);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover &:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
|
||||
&:hover * {
|
||||
color: var(--icon-color-hover);
|
||||
opacity: var(--icon-opacity-hover);
|
||||
}
|
||||
|
||||
&:active * {
|
||||
opacity: var(--icon-opacity-hover);
|
||||
color: var(--icon-color-focused);
|
||||
}
|
||||
|
||||
.action-button-icon {
|
||||
stroke: var(--icon-m-stroke-width);
|
||||
}
|
||||
}
|
||||
|
||||
.project-switcher {
|
||||
color: var(--vault-profile-color);
|
||||
border-radius: var(--radius-s);
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: var(--size-4-2);
|
||||
overflow: hidden;
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
|
||||
&:hover {
|
||||
color: var(--vault-profile-color-hover);
|
||||
background-color: var(--background-modifier-hover);
|
||||
|
||||
.project-switcher-icon {
|
||||
color: var(--icon-color-hover);
|
||||
opacity: var(--icon-opacity-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: var(--vault-profile-color-hover);
|
||||
background-color: var(--background-modifier-hover);
|
||||
|
||||
.project-switcher-icon {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.project-switcher-icon {
|
||||
height: var(--icon-m);
|
||||
width: var(--icon-m);
|
||||
stroke: var(--icon-m-stroke-width);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--icon-color);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
opacity: var(--icon-opacity);
|
||||
}
|
||||
|
||||
.project-switcher-name {
|
||||
font-size: var(--inline-title-size);;
|
||||
font-weight: var(--font-bold);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.subject-box {
|
||||
font-size: x-large !important;
|
||||
padding-left: 0px !important;
|
||||
background-color: tomato !important;
|
||||
font-weight: 600 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hidden-textbox {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.homework-manager h1 {
|
||||
font-size: xx-large;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.homework-manager h2 {
|
||||
font-size: x-large;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.homework-manager h3 {
|
||||
font-size: large;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.homework-manager .clickable-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.homework-manager #remove-subject {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--interactive-hover);
|
||||
}
|
||||
.homework-manager #remove-subject:hover {
|
||||
background-color: red;
|
||||
}
|
||||
.homework-manager #header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.homework-manager #header #left-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.homework-manager #header *:not(svg) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.homework-manager #body {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.homework-manager #body *:not(svg) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.homework-manager #body #subject {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.homework-manager #body #title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.homework-manager #body #task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.homework-manager #body #task div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
.homework-manager #body #task #check {
|
||||
background-color: transparent;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
flex-shrink: 0;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 50%;
|
||||
border-color: var(--icon-color);
|
||||
opacity: var(--icon-opacity);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
.homework-manager #body #task #check:hover {
|
||||
opacity: var(--icon-opacity-hover);
|
||||
border-color: var(--icon-color-hover);
|
||||
}
|
||||
.homework-manager #body #task #check:active {
|
||||
opacity: var(--icon-opacity-hover);
|
||||
border-color: var(--icon-color-focused);
|
||||
}
|
||||
.homework-manager #body #task p {
|
||||
font-size: large;
|
||||
margin: 0;
|
||||
}
|
||||
.homework-manager #body #task #date {
|
||||
color: var(--text-muted);
|
||||
font-size: small;
|
||||
}
|
||||
.homework-manager #menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.homework-manager #menu .menu-item:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
.homework-manager #subject-prompt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
gap: 10px;
|
||||
}
|
||||
.homework-manager #subject-prompt input {
|
||||
width: 50%;
|
||||
}
|
||||
.homework-manager #task-prompt {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.homework-manager #task-prompt #top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.homework-manager #task-prompt #top input {
|
||||
width: 50%;
|
||||
}
|
||||
.homework-manager #task-prompt #bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.homework-manager-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.homework-manager-link:hover {
|
||||
cursor: var(--cursor-link);
|
||||
text-decoration-line: var(--link-decoration-hover);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
|
|
|||
Loading…
Reference in a new issue