Added draggability

Author: TheWisker

README.md

@@ -12,6 +12,7 @@
 
 The theme features:
 
+- Draggable windows!
 - Multi-monitor support!
 - Multi-language support!
 - Custom time and date formats!

aur/.SRCINFO

@@ -1,7 +1,7 @@
 pkgbase = web-greeter-theme-shikai
 	pkgdesc = Modern lightdm webkit2 theme
-	pkgver = 1.2.1
-	pkgrel = 3
+	pkgver = 1.3.0
+	pkgrel = 4
 	url = https://github.com/TheWisker/Shikai
 	arch = any
 	license = GPL

aur/PKGBUILD

@@ -1,8 +1,8 @@
 # Maintainer: Wisker <TheWisker@protonmail.com>
 pkgname=web-greeter-theme-shikai
 pkgbase=web-greeter-theme-shikai
-pkgver=1.2.1
-pkgrel=3
+pkgver=1.3.0
+pkgrel=4
 pkgdesc="Modern lightdm webkit2 theme"
 arch=('any')
 url="https://github.com/TheWisker/Shikai"

dist/index.css

@@ -1,6 +1,6 @@
 {
   "name": "shikai",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Modern lightdm webkit2 theme",
   "keywords": [
     "lightdm",
@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
     "react-dropdown": "^1.11.0",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1"

dist/index.js

@@ -26,6 +26,7 @@
 
         &:nth-last-child(1) {
             width: 35px;
+            padding: 0 8px;
             min-width: 35px;
 
             svg {
@@ -117,6 +118,7 @@
 
     input[type="text"] {margin: 0 0 0 15px;}
 }
+
 .colorsbar {
     @include general.flex-center;
     margin: 0 0 15px 0;
@@ -131,7 +133,7 @@
 
     .text {
         color: #A0A0A0;
-        font-size: 0.9em;
+        font-size: 0.8em;
         margin: 0 0 10px 0;
         text-align: center;
     }

dist/monitor.js

@@ -3,6 +3,7 @@
 .notification {
     @include general.font;
     @include general.flex-center;
+
     height: 50px; width: 40%;
     transition: opacity ease-in 500ms;
     border: 5px solid #e6e6e6;
@@ -40,6 +41,34 @@
     &:active {opacity: 0.55;}
 }
 
+#settings_handle, #login_handle {
+    display: flex;
+    padding: 0 8px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        opacity: 0.4;
+        height: 25px;
+        width: 25px;
+    
+        &:hover {opacity: 0.6}
+        &:active {opacity: 1}
+    }
+}
+
+
+#settings_handle {
+    height: 100%;
+    background-color: rgba(40, 40, 40, 0.8);
+}
+
+#login_handle {
+    position: absolute;
+    right: 1px; top: 10px;
+}
+
 .logo {
     @include general.flex;
     @include general.square;

package-lock.json

@@ -16,6 +16,14 @@ $login_height: 500px;
     z-index: 100;
 }
 
+#settingroot .react-draggable {
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    height: 100%;
+    position: absolute;
+}
+
 .settingwindow {
     @include general.flex(column);
 
@@ -24,36 +32,38 @@ $login_height: 500px;
     z-index: 2;
     height: 100%;
     min-height: 0;
+    overflow: hidden;
     position: absolute;
-    transition: left 400ms;
-    width: $settings_width;
-    left: -#{$settings_width};
-    border-radius: 0 16px 16px 0;
+    border-radius: 25px;
+    transition: transform 400ms, border-radius 500ms;
+    width: $settings_width; left: 0;
 }
 
-.settingwindow.active {
-    left: 0;
-}
+.settingwindow.origin_left {border-radius: 0 25px 25px 0 !important;}
+.settingwindow.origin_right {border-radius: 25px 0 0 25px !important;}
 
 .loginwindow {
     @include general.flex;
 
     top: 50%;
     left: 50%;
     z-index: 1;
-    overflow: hidden;
     position: absolute;
-    border-radius: 16px;
     width: $login_width;
     height: $login_height;
-    transition: transform cubic-bezier(.47,1.64,.41,.8) 700ms, translate cubic-bezier(.47,1.64,.41,.8) 700ms, scale cubic-bezier(.47,1.64,.41,.8) 1000ms, opacity cubic-bezier(.47,1.64,.41,.8) 1500ms;
+    transition: transform cubic-bezier(0.65, 1.75, 0.62, 0.68) 1200ms, translate cubic-bezier(0.65, 1.75, 0.62, 0.68) 1200ms, scale cubic-bezier(0.65, 1.75, 0.62, 0.68) 1000ms, opacity cubic-bezier(.47,1.64,.41,.8) 1500ms;
     margin: -#{math.div($login_height, 2)} 0 0 -#{math.div($login_width, 2)};
-}
 
-/*
-margin: -22.5vh 0 0 -22.5vw;
-width: 45%;
-height: 45%;
-min-width: 850px;
-min-height: 500px;
-*/
+    & > div {
+        @include general.flex;
+        width: 100%; height: 100%;
+        
+        & > div {
+            @include general.flex;
+            width: 100%; height: 100%;
+            transition: border-radius 500ms;
+            border-radius: 18px;
+            overflow: hidden;
+        }
+    }
+}

package.json

@@ -30,7 +30,6 @@ class Option extends React.Component {
 class Options extends React.Component {
     render() {
         let array = [];
-        console.log(this.props.lang)
         options.filter((option) => {return this.props.commands[option.text]}).forEach((option, i) => {array[i] = <Option text={data.get(this.props.lang, "commands.names." + option.text)} func={option.func} icon={<option.icon/>} color={this.props.color} key={option.text}/>});
         return (<div className="commandbar">{array}</div>);
     }

src/assets/drag.svg

@@ -9,11 +9,16 @@ import Session from "./Session";
 import Switch from "./Switch";
 import Date from "./Date";
 
+import Drag from "../../../../assets/drag.svg";
+
 class Userbar extends React.Component {
     componentDidMount() {document.getElementById("password").focus();}
 
     render() {
         return (<div className={"userbar " + cxs({background: `linear-gradient(${this.props.background.top} 0%, ${this.props.background.bottom} 100%)`})}>
+            <div id="login_handle" onDoubleClick={() => {this.props.action()}}>
+                <Drag/>
+            </div>
             <Avatar/>
             <Username/>
             <form className="expand" onSubmit={(e) => {e.preventDefault()}}>

src/css/_bars.scss

@@ -1,11 +1,41 @@
 import React from "react";
+import Draggable from "react-draggable";
 
 import Sidebar from "./Sidebar";
 import Userbar from "./Userbar";
 
-export default () => {
-    return (<React.Fragment>
-        <Sidebar/>
-        <Userbar/>
-    </React.Fragment>);
+const window_height = 500;
+const window_width = 850;
+
+export default class LoginWindow extends React.Component {
+    constructor(props) {
+        super(props);
+        if (!localStorage.getItem("LoginDrag")) {localStorage.setItem("LoginDrag", JSON.stringify({x: 0, y: 0}))}
+        this.state = {data: JSON.parse(localStorage.getItem("LoginDrag"))};
+        this.dragEvent = this.dragEvent.bind(this);
+        this.dragStop = this.dragStop.bind(this);
+    }
+
+    dragEvent(_, _data) {this.setState({data: {x: _data.x, y: _data.y}});}
+
+    dragStop(_, data) {localStorage.setItem("LoginDrag", JSON.stringify({x: data.x, y: data.y}));}
+    //{left: ((screen.availWidth/2) - (window_width/2)), right: ((screen.availWidth/2) + (window_width)), top: (screen.availHeight/2) - (window_height/2), bottom: (screen.availHeight/2) + (window_height)}
+    render() { //disabled={!this.props.active}
+        //if (this.state.data.x == 0) {classes.push("origin_left");}
+        //if (this.state.data.x == screen.availWidth - window_width) {classes.push("origin_right");}
+        //let t = (this.props.active) ? null : ("translate(" + (((this.state.data.x + (window_width/2)) <= (screen.availWidth/2)) ? (-(this.state.data.x + window_width)) : (screen.availWidth - this.state.data.x)) + "px, 0px)");
+        let bounds = {left: -((screen.availWidth/2) - (window_width/2)), right: ((screen.availWidth/2) - (window_width/2)), top: -((screen.availHeight/2) - (window_height/2)), bottom: ((screen.availHeight/2) - (window_height/2))};
+        return (<Draggable axis="both" handle="#login_handle" bounds={bounds} position={this.state.data} onDrag={this.dragEvent} onStop={this.dragStop}>
+            <div id="login_drag">
+                <div style={{borderTopLeftRadius: (this.state.data.x == bounds.left || this.state.data.y == bounds.top) ? "0px" : null, borderTopRightRadius: (this.state.data.x == bounds.right || this.state.data.y == bounds.top) ? "0px" : null, borderBottomLeftRadius: (this.state.data.x == bounds.left || this.state.data.y == bounds.bottom) ? "0px" : null, borderBottomRightRadius: (this.state.data.x == bounds.right || this.state.data.y == bounds.bottom) ? "0px" : null}}>
+                    <Sidebar/>
+                    <Userbar action={() => {
+                        document.getElementById("login_drag").style.transition = "transform 400ms";
+                        this.dragEvent(null, {x: 0, y: 0}); this.dragStop(null, {x: 0, y: 0});
+                        setTimeout(() => {document.getElementById("login_drag").style.transition = "";}, 400);
+                    }}/>
+                </div>
+            </div>
+        </Draggable>);
+    }
 }

src/css/_objects.scss

@@ -1,13 +1,17 @@
 import React from "react";
 import {connect} from "react-redux";
 
+import Drag from "../../../../assets/drag.svg";
 import Image from "../../../../assets/close.svg";
 
 import {data} from "../../../../lang";
 
 class Sectionbar extends React.Component {
     render() {
         return (<div className="sectionbar">
+            <div id="settings_handle" onDoubleClick={() => {this.props.reset()}}>
+                <Drag/>
+            </div>
             <div className="text button" onClick={this.props.action}>{data.get(this.props.lang, "settings.behaviour.name")}</div>
             <div className="text button" onClick={() => this.props.action("style")}>{data.get(this.props.lang, "settings.style.name")}</div>
             <div className="text button" onClick={() => this.props.action("themes")}>{data.get(this.props.lang, "settings.themes.name")}</div>

src/css/_windows.scss

@@ -8,8 +8,9 @@ export default class Textarea extends React.Component {
     }
 
     update(event) {
-        this.setState({value: event.target.value.slice(0, -1)});
-        this.props.action(event.target.value.slice(0, -1));
+        let inx = (event.target.value.slice(-1) == ";") ? -1 : -2;
+        this.setState({value: event.target.value.slice(0, inx)});
+        this.props.action(event.target.value.slice(0, inx));
         event.preventDefault();
     }
 

src/js/Components/LoginWindow/Sidebar/Options.jsx

@@ -9,7 +9,7 @@ import {data} from "../../../../lang";
 class Style extends React.Component {
     render() {
         return (<React.Fragment>
-            <div className="scroll" style={{paddingBottom: "25px"}}>
+            <div style={{paddingBottom: "25px"}}>
                 <div className="section">
                     <div className="text title">{data.get(this.props.lang, "settings.style.sections.main.name")}</div>
                     <Logo/>