akfatimeline 1.0.2 → 1.0.5

package/public/dist/dist/components/Timeline/Timeline.css

@@ -0,0 +1,616 @@
+/* src/components/Timeline/Timeline.css */
+@import "flatpickr/dist/themes/material_green.css";
+
+/* 
+  Temel: "sales sayfası" temasıyla uyumlu renkler, 
+  light vs. dark tanımları 
+*/
+
+:root {
+  /* Light Tema Varsayılan Renkler */
+  --background-color: #f5f5f2;       /* Açık tema arka plan */
+  --text-color: #666;               /* Açık tema yazı rengi */
+  --border-color: #bbb;             /* Daha yumuşak border */
+
+  /* Header */
+  --header-background-color: #f5f5f2;  /* Üst header, tablo header */
+  --header-text-color: #666;
+
+  /* Resources */
+  --resource-background-color: #f5f5f2;  
+  --resource-text-color: #666;
+  --group-header-background-color: #dadada;
+
+  /* Timeline */
+  --timeline-header-background-color: #f5f5f2;
+  --timeline-cell-border-color: #ccc;
+  --timeline-event-background-color: #fff;
+  --timeline-event-border-color: #666;
+  --timeline-event-text-color: #666;
+
+  /* Scrollbar */
+  --scrollbar-thumb-background: #aaa;
+  --scrollbar-thumb-hover-background: #888;
+
+  --resource-width: 150px;
+  --cell-height: 40px;
+  --header-height: 60px;
+  --time-slot-height: 20px;
+  --container-height: 480px;
+
+  --timeline-new-event-background-color: #ff5722;
+  --timeline-new-event-text-color: #fff;
+
+  --timeline-event-background-color: #ff7f50; 
+  --timeline-event-text-color: #fff;
+  --timeline-event-border-color: #fff;
+
+  --timeline-cell-selected-bg: rgba(25,118,210,0.2);
+
+  user-select: none; /* Metin seçimini engelle */
+}
+
+/* Koyu Tema */
+.dark-mode {
+  /* Koyu tema */
+  --background-color: #16202a;               /* Koyu tema arka plan */
+  --text-color: #ddd;                        /* Koyu tema yazı rengi */
+  --border-color: #444;
+
+  --header-background-color: #16202a;
+  --header-text-color: #bbb;
+
+  --resource-background-color: #16202a;
+  --resource-text-color: #bbb;
+  --group-header-background-color: #0d141b;
+
+  --timeline-header-background-color: #16202a;
+  --timeline-cell-border-color: #444;
+  --timeline-event-background-color: #2a2a2a;
+  --timeline-event-border-color: #222;
+  --timeline-event-text-color: #ddd;
+
+  --scrollbar-thumb-background: #555;
+  --scrollbar-thumb-hover-background: #888;
+
+  --timeline-new-event-background-color: #a83e20;
+  --timeline-new-event-text-color: #eee;
+
+  --timeline-event-background-color: #a83e20;
+  --timeline-event-text-color: #fff;
+  --timeline-event-border-color: #222;
+
+  --timeline-cell-selected-bg: rgba(76,175,80,0.2);
+}
+
+/* Genel Timeline Konteyner */
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+/* Master Header */
+.timeline-master-header {
+  width: 100%;
+  background-color: var(--header-background-color);
+  color: var(--header-text-color);
+  border-bottom: 1px solid var(--border-color);
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+/* Timeline Body */
+.timeline-body {
+  display: flex;
+  flex: 1;
+}
+
+/* Sol Kısım: Resources */
+.timeline-resources-container {
+  width: var(--resource-width);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-color);
+  position: sticky;
+  left: 0;
+  top: var(--header-height);
+  z-index: 2;
+  background-color: var(--resource-background-color);
+  overflow-y: auto;
+}
+
+/* Resources Header */
+.resources-header {
+  background-color: var(--header-background-color);
+  color: var(--resource-text-color);
+  text-align: center;
+  width: var(--resource-width);
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: calc(var(--header-height) * 2); /* Üst üste iki header yüksekliği */
+  border-right: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
+
+/* Grup Başlığı Hücreleri */
+.group-header-row {
+  display: flex;
+  height: var(--cell-height);
+  background-color: var(--group-header-background-color);
+  color: var(--resource-text-color);
+  font-weight: bold;
+}
+
+.group-header-cell {
+  flex: 1;
+  border: 1px solid var(--border-color);
+  text-align: center;
+  background-color: var(--group-header-background-color);
+  color: var(--resource-text-color);
+  height: var(--cell-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Resource Grupları */
+.resource-group {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Resource Grup Header */
+.resource-group-header {
+  background-color: var(--group-header-background-color);
+  color: var(--resource-text-color);
+  font-weight: bold;
+  height: var(--cell-height);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0px;
+  cursor: pointer;
+  border: 1px solid var(--border-color);
+}
+
+/* Resource Hücreleri */
+.resource-cell {
+  padding: 0;
+  text-align: left;
+  background-color: var(--resource-background-color);
+  color: var(--resource-text-color);
+  height: var(--cell-height);
+  display: flex;
+  align-items: center;
+  border: 0.3px solid var(--border-color);
+  box-sizing: border-box;
+}
+
+/* Sağ Kısım: Timeline */
+.timeline-scrollable-container {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* Header ve Content Wrapper */
+.timeline-header-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Timeline Header */
+.timeline-header {
+  display: flex;
+  background-color: var(--timeline-header-background-color);
+  color: var(--header-text-color);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: var(--header-height);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* Timeline Content */
+.timeline-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Grup Container */
+.group-container {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Resource Satırları */
+.resource-row {
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  height: var(--cell-height);
+  border: 1px solid var(--border-color);
+  margin-top: -1px;
+  overflow: hidden;
+}
+
+/* Timeline Hücreleri */
+.timeline-cell {
+  flex: 1;
+  border: 1px solid var(--timeline-cell-border-color);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Hücre Seçili Durumu */
+.timeline-cell.selected {
+  background-color: rgba(25, 118, 210, 0.2); /* satır içi/hover */
+}
+
+/* Event Stilleri */
+.event {
+  position: absolute;
+  background-color: var(--timeline-event-background-color);
+  color: var(--timeline-event-text-color);
+  font-size: 12px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid var(--timeline-event-border-color);
+  cursor: pointer;
+}
+
+/* Event Time Stili */
+.event-time {
+  font-size: 10px;
+  margin-top: 2px;
+}
+
+/* Scrollbar için */
+.timeline-scrollable-container::-webkit-scrollbar {
+  height: 10px;
+}
+
+.timeline-scrollable-container::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-background);
+  border-radius: 5px;
+}
+
+.timeline-scrollable-container::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-background);
+}
+
+.resources-header {
+  background-color: var(--header-background-color);
+  color: var(--resource-text-color);
+  text-align: center;
+  width: var(--resource-width);
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  border-right: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
+
+/* TimelineHeader Container */
+.timeline-header-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ay + Yıl satırı */
+.timeline-header-month-row {
+  display: flex;
+  background-color: var(--header-background-color);
+  color: var(--header-text-color);
+  font-weight: bold;
+  font-size: 16px;
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Ay + Yıl hücreleri */
+.timeline-header-month-cell {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border-right => dynamic, inline style if needed */
+  box-sizing: border-box;
+}
+
+/* Günlük Hücreler (tarih satırı) */
+.timeline-header-day-row {
+  display: flex;
+  background-color: var(--timeline-header-background-color);
+  color: var(--header-text-color);
+  /* border-bottom: 1px solid var(--border-color); if needed */
+}
+
+/* Günlük hücre (her gün) */
+.timeline-header-day-cell {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+
+/* src/components/Timeline/Timeline.css */
+/* Ekleme: MasterHeader stili */
+
+/* Kapsayıcı */
+.master-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* Butonlar solda, select sağda */
+  padding: 10px;
+  background-color: var(--header-background-color);
+  color: var(--header-text-color);
+}
+
+.master-header-buttons {
+  display: flex; /* Yan yana dizilim */
+  align-items: center; /* Dikey hizalama */
+}
+
+.master-header-btn {
+  background-color: transparent;
+  color: var(--header-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 6px 12px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.master-header-btn:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
+}
+
+.dark-mode .master-header-btn:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
+}
+
+.master-header-btn:focus {
+  outline: none;
+}
+
+
+
+/* Tarih seçici (Date Picker) */
+.master-header-date-picker {
+  background-color: transparent;
+  color: var(--header-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 5px 12px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.master-header-date-picker:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
+}
+
+.dark-mode .master-header-date-picker:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
+}
+
+.master-header-date-picker:focus {
+  outline: none;
+}
+
+/* Select */
+.master-header-select {
+  margin-left: auto; /* Sağa yaslamak için */
+  background-color: transparent;
+  color: var(--header-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.master-header-select:focus {
+  outline: none;
+}
+
+/* Flatpickr Takvim Kutusu */
+.flatpickr-calendar {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
+}
+
+
+/* Flatpickr Günü */
+.flatpickr-day {
+  background-color: var(--background-color); /* Arka plan rengi */
+  color: var(--text-color); /* Yazı rengi */
+  border-radius: 4px; /* Köşeleri yuvarlat */
+  cursor: pointer;
+}
+
+.flatpickr-day:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Hover efekti */
+}
+
+.dark-mode .flatpickr-day:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover efekti */
+}
+
+/* Seçili Gün */
+.flatpickr-day.selected {
+  background-color: #4caf50; /* Seçili gün rengi */
+  color: white; /* Seçili gün yazı rengi */
+}
+
+/* Flatpickr Ay ve Yıl */
+.flatpickr-months .flatpickr-month {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+/* Flatpickr Ay İleri ve Geri Düğmeleri */
+.flatpickr-prev-month, .flatpickr-next-month {
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+/* Koyu Tema Örnekleri */
+.dark-mode .flatpickr-calendar {
+  background-color: #1f2937; /* Koyu tema arka plan */
+  color: #ffffff; /* Koyu tema yazı rengi */
+}
+
+.dark-mode .flatpickr-day.selected {
+  background-color: #4caf50;
+  color: white;
+}
+
+
+/* Container */
+.timeline-content-container {
+  position: relative;
+  width: 100%;
+  height: auto; /* or as needed */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Group container */
+.timeline-group-container {
+  margin-bottom: 0px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Group header row */
+.timeline-group-header-row {
+  display: flex;
+  margin-top: -0.08rem;
+}
+
+.timeline-group-header-cell {
+  flex: 1;
+  height: 2.58rem;
+  background-color: var(--group-header-background-color);
+  border: 1px solid var(--border-color);
+  
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Resource row */
+.timeline-resource-row {
+  display: flex;
+  position: relative;
+  height: var(--cell-height, 40px);
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
+
+/* Each day cell */
+.timeline-cell {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* "selected" day cell */
+.timeline-cell.selected {
+  background-color: var(--timeline-cell-selected-bg, rgba(25,118,210,0.2));
+}
+
+/* Event */
+.timeline-event {
+  position: absolute;
+  background-color: var(--timeline-event-background-color, #0093ce);
+  color: var(--timeline-event-text-color, #fff);
+  font-size: 14px;
+  padding: 5px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid var(--timeline-event-border-color, #fff);
+  top: 5px; /* or a variable offset if you want */
+  /* "left" and "width" are inline from JS */
+}
+
+/* Extend handle */
+.timeline-event-extend-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  background-color: rgba(0,0,0,0.2);
+  cursor: col-resize;
+  z-index: 20;
+}
+
+/* Temp event (while creating) */
+.timeline-temp-event {
+  position: absolute;
+  background-color: var(--timeline-new-event-background-color, #0093ce);
+  color: var(--timeline-new-event-text-color, #fff);
+  opacity: 0.7;
+  border-radius: 20px;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  /* "left"/"width" from JS: " ...calculatePosition(tempEvent, dates)" */
+  top: 5px;
+}